DDS/Installation

Installation

Integrate DDS into a Nuxt 4 project in 5 steps.

Install the package

bash

npm install design-system-antoinegourgue

Peer dependencies (if not already installed):

bash

npm install nuxt @nuxtjs/tailwindcss

Add the Nuxt module

nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'design-system-antoinegourgue/module',
    '@nuxtjs/tailwindcss',
  ],
  tailwindcss: {
    configPath: './tailwind.config.ts',
    cssPath: '~/assets/main.css',
  },
})

Configure the Tailwind preset

The preset maps every design token to a Tailwind utility class (bg-ds-primary, text-ds-fg, etc.). The content array must include the library's dist files so Tailwind generates all the component classes.

tailwind.config.ts

// tailwind.config.ts
import type { Config } from 'tailwindcss'
import dsPreset from 'design-system-antoinegourgue/tailwind/preset'

export default {
  presets: [dsPreset],
  content: [
    './app/**/*.{vue,ts,js}',
    // Scan library components so Tailwind generates their utility classes
    './node_modules/design-system-antoinegourgue/dist/**/*.{js,mjs,vue}',
  ],
} satisfies Config

Create the CSS entry point

This file imports the design tokens (CSS variables) from the library and adds the standard Tailwind directives.

app/assets/main.css

/* app/assets/main.css */
@import 'design-system-antoinegourgue/dist/runtime/assets/base.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

Add DsToastProvider to the app root

The DsToastProvider renders the toast stack. Place it once at the root of your app.

app/app.vue

<!-- app/app.vue -->
<template>
  <div>
    <DsToastProvider />
    <NuxtPage />
  </div>
</template>

You're ready

All Ds* components are globally auto-imported. No explicit imports needed in your templates.

vue

<!-- All Ds* components are auto-imported, no import needed -->
<template>
  <DsButton variant="primary" @click="save" :loading="loading">
    Save changes
  </DsButton>

  <DsAlert variant="success" title="Saved" description="Your changes have been saved." />

  <DsCard hoverable>
    <DsCardHeader>
      <h3 class="font-semibold text-ds-fg">Dashboard</h3>
    </DsCardHeader>
    <DsCardContent>
      <p class="text-sm text-ds-fg-muted">Welcome back.</p>
    </DsCardContent>
  </DsCard>
</template>

Custom component prefix

Set nuxtDs: { prefix: 'My' } in nuxt.config.ts to use MyButton instead of DsButton.