Vue

This method can be used for version 3 and up.

Installation

Install dap-design-system inside project folder.

npm i dap-design-system
Usage with Vite Config

In vite.config.ts add isCustomElement part to vue plugins.

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => {
            return tag.startsWith('dap-')
          }
        }
      }
    }),
    vueJsx(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
Changes for main.ts

In main.ts add:

  • import 'dap-design-system/dist/dds.js';
  • import 'dap-design-system/dist/light.theme.css'
import 'dap-design-system/dist/dds.js'
import 'dap-design-system/dist/light.theme.css'
import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
Adding an Input Component to AppComponent

In app.vue add input field and event handler:

<script setup lang="ts">
function onDDSInputChanged(event: CustomEvent) {
  console.log('Input changed:', event.detail.value)
}
</script>

<template>
  <main>
    <h1>App vue</h1>
    <p>dap-ds-input</p>
    <form id="input-form">
      <dap-ds-input
        @dds-change="onDDSInputChanged"
        id="text-input"
        name="text-input"
        required
        label="Required"
        description="Description"
        helperText="Validate for required"
        tooltip="Tooltip content"
        feedbackType="negative" value=""></dap-ds-input>
    </form>
  </main>
</template>

<style scoped>
</style>