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.

Comment l’utiliser

TL;DR

Avec npm :

npm init vue-dsfr

Avec pnpm :

pnpm create vue-dsfr

Avec yarn :

yarn create vue-dsfr

Et suivez le guide !

Détails :

Cf. le site officiel

Comment contribuer

TL;DR

Les commits doivent suivre la spécification des Commits Conventionnels

Une PR doit être faite avec une branche à jour avec la branche develop en rebase (et sans merge) avant demande de fusion, et la fusion doit être demandée dans develop.

Détails

Cf le site officiel

Utiliser la bibliothèque dans un projet existant (ou un nouveau projet sans passer par create-vue-dsfr)

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>

Plus d'informations

Veuillez consulter le site officiel pour plus d'informations.