@quartzds/open-core-vue NPM

@quartzds/open-core-vue

Vue wrapper for Quartz design system web components.

💿 Installation

npm install @quartzds/open-core-vue vue

📖 Usage

Importing Components

Every Quartz core component is available to import as a Vue component. Note that we're importing the <QdsButton> Vue component instead of the <qds-button> custom element in the example below:

<template>
  <QdsButton importance="emphasized">Click me</QdsButton>
</template>

<script setup>
import { QdsButton } from '@quartzds/open-core-vue'
</script>

Event Handling

Many Quartz core components emit custom events. For example, the input component emits the qdsInput event when it receives input. In Vue, you can listen to the event using @qdsInput.

Here's how you can bind the input's value to a state variable:

<template>
  <QdsInput
    value="{value}"
    @qdsInput="
      (event) => {
        value = event.target.value
      }
    "
  />
</template>

<script setup>
import { ref } from 'vue'
import { QdsButton } from '@quartzds/open-core-vue'

const value = ref('')
</script>