data.gouv.fr Components
Architectures
The package contains ready-made components to use on your data.gouv.fr front-end.
This package works with @gouvfr/dsfr
and @gouvminint/vue-dsfr
packages.
You should add their styles and js before using these components.
The package requires a call to setupI18n
to create its vue-i18n instance.
You must add the i18n instance to your Vue instance.
You can also use an existing i18n instance instead with setupI18nWithExistingInstance
.
You should add the package styles after the DSFR ones or you may encounter unexpected results.
import '@gouvfr/dsfr/dist/dsfr.min.css';
import '@gouvfr/dsfr/dist/utility/utility.min.css';
import '@gouvfr/dsfr/dist/dsfr.module.min.js';
import '@etalab/data.gouv.fr-components/dist/style.css';
import { setupI18n } from '@etalab/data.gouv.fr-components';
import { createApp } from 'vue';
import App from './App.vue';
const i18n = setupI18n();
createApp(App)
.use(i18n)
.mount('#app');
window.dsfr.start();
env variables
You can customize how this package work with env variables during build and runtime (with setupComponents
function).