Vue Component Wrappers

Updated:
This feature is experimental within the Stencil Library (Docs) and is automated within their build process. Please report any issues encountered. However, note that the Tecton team does not maintain this specific tool.

 This tutorial assumes your codebase is registering the Web Components via connect from the q2-tecton-sdk, or from the q2-design-system library.

If you're using Vue to build out your feature or application, then you can make use of the Vue component wrappers that are published as a part of Tecton.

This gives you a number of benefits including:

  • Autocompletion
  • Better event handling
  • Type safety
  • v-model support for two-way data binding

Getting started

Making use of the Vue component wrappers only requires a couple of steps.

First, you will need to install the framework wrappers library:

  • NPM: npm i q2-tecton-framework-wrappers
  • Yarn: yarn add q2-tecton-framework-wrappers
  • Pnpm: pnpm add q2-tecton-framework-wrappers

v-model Support

The Vue component wrappers support v-model for two-way data binding on form components. This allows you to bind component values directly to your reactive data without manually handling events.

Supported Components

  • q2-input
  • q2-textarea
  • q2-editable-field
  • q2-select
  • q2-checkbox
  • q2-checkbox-group
  • q2-radio-group
  • q2-calendar
  • q2-tab-container
  • q2-pagination

Using the components

Once the package is installed you can start using the components by importing the ones you need, just like you would with any other components. They are all located in q2-tecton-framework-wrappers/dist/vue.

<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  Q2Input,
  Q2Select,
  Q2Checkbox,
  Q2Section,
  Q2Btn
} from "q2-tecton-framework-wrappers/dist/vue";

export default defineComponent({
  components: { Q2Input, Q2Select, Q2Checkbox, Q2Section, Q2Btn },
  setup() {
    const fullName = ref("");
    const selectedOption = ref("");
    const isChecked = ref(false);

    const onSubmit = () => {
      console.log("Submitted:", fullName.value, selectedOption.value, isChecked.value);
    };

    return { fullName, selectedOption, isChecked, onSubmit };
  },
});
</script>

<template>
  <q2-section label="My Section" collapsible expanded>
    <q2-input label="Full name" v-model="fullName" />
    <q2-select label="Choose an option" v-model="selectedOption">
      <q2-option value="a">Option A</q2-option>
      <q2-option value="b">Option B</q2-option>
    </q2-select>
    <q2-checkbox label="I agree" v-model="isChecked" />
    <q2-btn intent="workflow-primary" @click="onSubmit">Submit</q2-btn>
  </q2-section>
</template>