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.

Avec npm :

npm init vue-dsfr

Avec pnpm :

pnpm create vue-dsfr

Avec yarn :

yarn create vue-dsfr

Et suivez le guide !

Cf. le site officiel

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.

Cf le site officiel

npm install @gouvminint/vue-dsfr

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


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.