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.
- npm : version 7 minimum
- Node.js : version 16 minimum
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).
npm install @laruiss/vue-dsfr@beta
Note :
Le @beta
est très important pour avoir la dernière version.
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>
Veuillez consulter le site officiel pour plus d'informations.