@laruiss/nuxt-dsfr NPM

VueDsfr

VueDsfr est un portage en Vue 3 du Système de Design Français (ou DSFR) sous forme de bibliothèque de composants. Il peut s'utiliser facilement en tant que plugin.

Pré-requis

npm : version 7 minimum
Node.js : version 16 minimum

Installation des pré-requis (testé sous Ubuntu 20.04)

Suivez la procédure suivante en lançant les commandes détaillées ci-dessous :

Mise à jour des dépôts :

sudo apt update

Installer Node.js :

sudo apt install nodejs

Vérifier la version de npm (7 ou supérieur) :

npm --version

Installer nvm (Node Version Manager) :

Avec la commande curl :

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

Ou avec la commande wget :

wget -q0- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

Fermer et rouvrir un terminal, ou bien taper la commande suivante dans tous les terminaux déjà ouverts :

source ~/.bashrc

Vérifier la version de NVM installée :

nvm --version

Vérifier qu'on pourra bien installer la version de nodejs avec la commande suivante, qui donne la liste des versions nodejs installables :

nvm ls-remote

Installer la version de nvm voulue :

nvm install <version>

exemple :

nvm install 16

Vérifier la version de npm (7 ou supérieur) :

npm --version

Remarque : certaines commandes peuvent demander un temps d'exécution assez conséquent (plusieurs minutes).

Installer la bibliothèque

npm install @laruiss/vue-dsfr@beta

Note :

Le @beta est très important pour avoir la dernière version.

Utiliser la bibliothèque en tant que plugin Vue 3

import { createApp } from 'vue'
import App from './App.vue'
import VueDsfr from '@laruiss/vue-dsfr'            // Import (par défaut) de la bibliothèque

import '@laruiss/vue-dsfr/dist/vue-dsfr-fonts.css' // Import de toutes les polices
import '@laruiss/vue-dsfr/dist/vue-dsfr.css'       // Import des styles globaux

const app = createApp(App)
  .use(VueDsfr)                                    // Ajout en tant que plugin
  .mount('#app')

Et ensuite, les composants sont utilisables directement dans les composants de l'application :

<template>
  <DsfrHeader
    logo-text="Gouvernement"
    service-title="Bureau des légendes"
  />
  <div class="fr-container">
    <router-view />
  </div>
</template>