Vue Integration

Vue Integration

Setup

npm install @bnotk/dsx

Import CSS in your main entry:

main.ts

import '@bnotk/dsx/css/index.css';

Configure Vue to recognize dsx- elements:

vite.config.ts

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

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('dsx-'),
        },
      },
    }),
  ],
});

Usage

<script setup lang="ts">
import '@bnotk/dsx/components/dialog.js';
import '@bnotk/dsx/components/table.js';
import { ref } from 'vue';

const dialogRef = ref<any>(null);
const columns = [
  { id: 'name', label: 'Name', resizable: true },
  { id: 'email', label: 'E-Mail' },
];
const rows = ref([
  { name: 'Alice', email: 'alice@example.de' },
]);

function onRowClick(e: CustomEvent) {
  console.log('Clicked:', e.detail.row);
}
</script>

<template>
  <button class="dsx-btn dsx-btn--primary" @click="dialogRef?.show()">
    Open
  </button>

  <dsx-table
    :columns="columns"
    :rows="rows"
    sortable
    column-toggle
    @dsx-row-click="onRowClick"
  />

  <dsx-dialog ref="dialogRef" heading="Hello" size="md">
    <p slot="body">Vue + dsx</p>
    <div slot="footer">
      <button class="dsx-btn dsx-btn--primary" @click="dialogRef?.close()">
        OK
      </button>
    </div>
  </dsx-dialog>
</template>

Property Binding

Vue binds complex properties (objects, arrays) with :prop syntax — this works with Lit elements:

<dsx-table :columns="myColumns" :rows="myRows" />
<dsx-dropdown-typeahead :options="opts" searchable multiple />

Event Handling

Vue’s @event syntax handles CustomEvents naturally:

<dsx-datepicker :value="date" @dsx-change="date = $event.detail.value" />