https://github.com/laruiss/vue-dsfr-nuxt-module
Module Nuxt 3 pour VueDsfr
https://github.com/laruiss/vue-dsfr-nuxt-module
dsfr nuxt3 vue-dsfr vue3
Last synced: 6 months ago
JSON representation
Module Nuxt 3 pour VueDsfr
- Host: GitHub
- URL: https://github.com/laruiss/vue-dsfr-nuxt-module
- Owner: laruiss
- Created: 2023-12-17T14:18:26.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-05T12:53:25.000Z (9 months ago)
- Last Synced: 2024-11-29T08:46:47.704Z (6 months ago)
- Topics: dsfr, nuxt3, vue-dsfr, vue3
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vue-dsfr-nuxt-module
- Size: 582 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Module VueDsfr pour Nuxt
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
Ce module facilite l’utilisation de la bibliothèque VueDsfr dans un projet Nuxt 3.
- [✨ Release Notes](/CHANGELOG.md)
- [🏀 Online playground](https://stackblitz.com/github/laruiss/vue-dsfr-nuxt-module?file=playground%2Fapp.vue)
- [📖 Documentation](https://docs.vue-ds.fr/nuxt)
## 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](https://iconify.design/docs/icon-components/vue/)
## Configuration rapide
1. Ajouter la dépendance `vue-dsfr-nuxt-module` au projet
```bash
# 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`
```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`
```ts
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
```bash
# 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
```
[npm-version-src]: https://img.shields.io/npm/v/vue-dsfr-nuxt-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/vue-dsfr-nuxt-module
[npm-downloads-src]: https://img.shields.io/npm/dm/vue-dsfr-nuxt-module.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/vue-dsfr-nuxt-module
[license-src]: https://img.shields.io/npm/l/vue-dsfr-nuxt-module.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/vue-dsfr-nuxt-module
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com