DDS - Direct Design System

Nuxt module registers PrimeVue, token CSS, and auto-imports DDS components.

Requiresnuxt ^3.10 || ^4vue ^3.5

1

Install

Configure .npmrc for @directksa (GitHub Packages), then install.

npm install @directksa/dds
# or
yarn add @directksa/dds

2

nuxt.config.ts

Add the module and optional dds settings.

export default defineNuxtConfig({
  modules: ['@directksa/dds'],

  dds: {
    prefix: 'Dds',       // component name prefix (default: 'Dds')
    global: false,      // false = auto-import per page (recommended)
                        // true  = register every DDS component on app globally
    primeicons: true,   // PrimeIcons CSS (default: false)
    primeflex: false,   // PrimeFlex CSS (default: false)
  }
})

3

Templates — auto-imported

No component imports in <script>. Tags use the folder name in kebab-case.

<template>
  <dds-button label="Save" />
  <dds-inputtext v-model="name" />
  <dds-select v-model="city" :options="cities" option-label="name" />

  <dds-datatable :value="rows" paginator :rows="10">
    <dds-column field="name" header="Name" sortable />
    <dds-column field="price" header="Price" />
  </dds-datatable>
</template>

dds-column, dds-row, and dds-splitterpanel are registered by the DDS Nuxt plugin automatically.

4

Composables — auto-imported

<script setup>
const toast = useToast()
const confirm = useConfirm()
const { smAndDown, mdAndUp } = useDisplay()

toast.add({ severity: 'success', summary: 'Saved', life: 3000 })
</script>

5

Verify

nuxi dev

Vite plugin sets up PrimeVue, services, and directives only. For tree-shaking, add unplugin-vue-components or import components manually.

Requiresvue ^3.5vite

1

Install

npm install @directksa/dds
npm install -D unplugin-vue-components # recommended for auto-import
# or
yarn add @directksa/dds
yarn add -D unplugin-vue-components

2

main.ts — plugin & CSS

app.use(Dds) configures PrimeVue; it does not register DDS components.

import { createApp } from 'vue'
import App from './App.vue'
import Dds from '@directksa/dds/vue'
import '@directksa/dds/css'
import 'primeicons/primeicons.css' // PrimeIcons CSS (optional)
import 'primeflex/primeflex.css'   // PrimeFlex CSS (optional)

const app = createApp(App)
app.use(Dds)
app.mount('#app')

3

vite.config.ts — tree-shake auto-import

Resolver maps DdsButton → @directksa/dds/button. Only used components are bundled.

import Components from 'unplugin-vue-components/vite'

function DdsResolver() {
  return {
    type: 'component',
    resolve: (name) => {
      if (name.startsWith('Dds')) {
        return {
          importName: 'default',
          path: `@directksa/dds/${name.slice(3).toLowerCase()}`
        }
      }
    }
  }
}

export default defineConfig({
  plugins: [vue(), Components({ resolvers: [DdsResolver()] })]
})

4

Templates

<template>
  <DdsButton label="Save" />
  <DdsInputtext v-model="name" />
  <!-- or kebab-case -->
  <dds-button label="Save" />
</template>

Manual import (no unplugin): import DdsButton from '@directksa/dds/button'

5

Composables — explicit import

import { useToast, useConfirm, useDisplay } from '@directksa/dds/vue'

const toast = useToast()
toast.add({ severity: 'info', summary: 'Hello', life: 3000 })

7

Verify

npm run dev

Quasar — use DDS alongside Quasar components. DDS handles PrimeVue-based UI; Quasar layout, forms, and platform features stay on Quasar.

Requiresquasar ^2vue ^3.5@quasar/app-vite

1

Install

npm install @directksa/dds
npm install -D unplugin-vue-components # recommended for auto-import
# or
yarn add @directksa/dds
yarn add -D unplugin-vue-components

2

Boot file — `src/boot/dds.ts`

Register the DDS plugin and table helpers once at app startup.

import { defineBoot } from '#q-app/wrappers'
import Dds from '@directksa/dds/vue'
import '@directksa/dds/css'
import 'primeicons/primeicons.css'

export default defineBoot(({ app }) => {
  app.use(Dds)
})

3

quasar.config — enable boot & resolver

// quasar.config.ts
export default defineConfig(() => ({
  boot: ['dds'],
  build: {
    vitePlugins: [
      ['unplugin-vue-components/vite', {
        resolvers: [{
          type: 'component',
          resolve: (name) => {
            if (name.startsWith('Dds')) {
              return {
                importName: 'default',
                path: `@directksa/dds/${name.slice(3).toLowerCase()}`
              }
            }
          }
        }]
      }]
    ]
  }
}))

4

Use in Quasar pages

<template>
  <q-page padding>
    <q-toolbar class="q-mb-md">
      <q-toolbar-title>Orders</q-toolbar-title>
    </q-toolbar>

    <dds-datatable :value="orders" paginator :rows="10">
      <dds-column field="id" header="ID" />
      <dds-column field="status" header="Status" />
    </dds-datatable>

    <dds-button label="Export" class="q-mt-md" />
  </q-page>
</template>

<script setup>
import { useToast } from '@directksa/dds/vue'
const toast = useToast()
</script>

5

Tips for Quasar apps

Disable Quasar preflight-style conflicts if buttons/inputs look wrong — scope DDS inside <q-page> or adjust CSS layers.
Prefer dds-* for data-heavy UI (tables, pickers, dialogs); keep q-* for layout, drawers, and mobile patterns.
SSR Quasar apps: ensure @directksa/dds is transpiled in Vite / Quasar build config.

Primary Colors

50

100

200

300

400

500

600

700

800

900

950

Surface Colors

50

100

200

300

400

500

600

700

800

900

950

Usage in CSS

color: var(--p-primary-500);
background: var(--p-surface-50);
border-radius: var(--p-border-radius-md);

Override in your app

:root {
  --p-primary-500: #your-brand;
  font-family: DirectFont;
}

Release notes for @directksa/dds. Full history is in CHANGELOG.md at the repo root.

3.1.0

2026-06-01

Added

dds-bottomsheet — bottom sheet overlay
dds-stepperm — mobile-oriented stepper
dds-inputcount — numeric stepper input
dds-selection — header-style selection UI trigger (parent wires popover, dialog, or bottomsheet)

Changed

dds-select and dds-multiselect updated to match search / header field design

Direct Design System

Install

nuxt.config.ts

Templates — auto-imported

Composables — auto-imported

Verify

Install

main.ts — plugin & CSS

vite.config.ts — tree-shake auto-import

Templates

Composables — explicit import

Verify

Install

Boot file — src/boot/dds.ts

quasar.config — enable boot & resolver

Use in Quasar pages

Tips for Quasar apps

Primary Colors

Surface Colors

Usage in CSS

Override in your app

3.1.0

Added

Changed

Boot file — `src/boot/dds.ts`