Module VueDsfr pour Nuxt

Ce module facilite l’utilisation de la bibliothèque VueDsfr dans un projet Nuxt 3.

• ✨ Release Notes
• 🏀 Online playground
• 📖 Documentation

Features

• 🪄 Imports automagiques des composables VueDsfr
• 🪄 Imports automagiques des composants VueDsfr (inclus le composant VIcon)
• ✨ Facilitation de l’utilisation des icônes de @iconify/vue

Configuration rapide

1. Ajouter la dépendance vue-dsfr-nuxt-module au projet

# Avec pnpm
pnpm add -D vue-dsfr-nuxt-module

# Avec yarn
yarn add --dev vue-dsfr-nuxt-module

# Avec npm
npm i -D vue-dsfr-nuxt-module

N.B. : Vous devriez déjà avoir les dépendances @gouvminint/vue-dsfr et @gouvfr/dsfr

2. Ajouter vue-dsfr-nuxt-module dans la section modules de nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'vue-dsfr-nuxt-module'
  ]
})

3. Ajouter le CSS de DSFR dans la section css de nuxt.config.ts

Rappel : Vous devriez déjà avoir les dépendances @gouvminint/vue-dsfr et @gouvfr/dsfr

export default defineNuxtConfig({
  modules: [
    'vue-dsfr-nuxt-module'
  ],
  css: [
    '@gouvfr/dsfr/dist/core/core.main.min.css',           // Le CSS minimal du DSFR
    '@gouvfr/dsfr/dist/component/component.main.min.css', // Styles de tous les composants du DSFR
    '@gouvfr/dsfr/dist/utility/utility.main.min.css',     // Classes utilitaires : les composants de VueDsfr en ont besoin, contient aussi les icônes

    '@gouvfr/dsfr/dist/scheme/scheme.min.css',            // Facultatif : Si les thèmes sont utilisés (thème sombre, thème en bernes)
  ],
})

Et voilà ! Vous êtes prêts à utiliser VueDsfr dans votre app Nuxt ✨

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release