La version française suit.

GC Design System Components – Vue

To make it easier to integrate GC Design System web components into Vue projects, the gcds-components-vue package provides Vue wrappers.

These wrappers make it easier to work with web components in the Vue ecosystem by enabling type checking, integration with Vue Router, and support for v-model with form controls.

The web components inherit native properties and interoperability.

Documentation

You can find the full documentation for GC Design System Components on https://design-system.alpha.canada.ca/.

Vue installation instructions

Follow these steps to install and use GC Design System components in your Vue project.

1. Install the package

Navigate to your project’s root folder and run the following command:

npm install @cdssnc/gcds-components-vue

2. Import GC Design System

In your main.js file, import the GC Design System components plugin and use it:

import { GcdsComponents } from '@cdssnc/gcds-components-vue';

createApp(App).use(GcdsComponents).mount('#app');

3. Import GC Design System styles

There are 2 ways to do this:

• Import style to main.js.
• Import styles to App.vue.

a. Import the styles to your main.js file, alongside your style.css:

import '@cdssnc/gcds-components-vue/gcds.css';
import './style.css';

b. Import the styles to your App.vue using the HTML style tag:

<style src="@cdssnc/gcds-components-vue/gcds.css">
  /* global styles */
</style>

4. Start building

Once you've installed the design system, start building! Browse our available components and templates to pull the code you need into your project.

Using Vite

If using Vite, additional configuration will need to be added to vite.config.ts to prevent Vue from logging a warning about failing to resolve components (e.g. "Failed to resolve component: gcds-header").

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: tag => tag.includes('-'),
        },
      },
    }),
  ],
});

How to contribute

If you are interested in contributing to GC Design System Components, please read our contributing guidelines.

License

Code released under the MIT License.

Composants de Système de design GC — Vue

Pour faciliter l’intégration des composants Web de Système de design GC dans les projets Vue, le paquet gcds-components-vue propose différentes enveloppes Vue.

Ces enveloppes facilitent le travail avec les composants Web dans l’écosystème Vue en permettant la vérification des types, l’intégration avec Vue Router, et la prise en charge de la fonction v-model avec les contrôles de formulaire.

Les composants Web héritent les propriétés et l’interopérabilité natives.

Documentation

Toute la documentation sur les composants de Système de design GC est accessible à l’adresse https://systeme-design.alpha.canada.ca/.

Instructions d’installation dans Vue

Suivez ces étapes pour installer et utiliser les composants de Système de design GC dans votre projet Vue.

1. Installer le paquet

Naviguez vers le dossier racine de votre projet et exécutez la commande suivante :

npm install @cdssnc/gcds-components-vue

2. Importer Système de design GC

Dans votre fichier main.js, importez le plugiciel des composants de Système de design GC et utilisez-le :

import { GcdsComponents } from '@cdssnc/gcds-components-vue';

createApp(App).use(GcdsComponents).mount('#app');

3. Importer les styles de Système de design GC

Il y a 2 façons de le faire :

• Importer le style dans main.js.
• Importer des styles dans App.vue.

a. Importez les styles dans votre fichier main.js, à côté de votre style.css:

import '@cdssnc/gcds-components-vue/gcds.css';
import './style.css';

b. Importez les styles dans fichier App.vue en utilisant la balise HTML style :

<style src="@cdssnc/gcds-components-vue/gcds.css">
  /* global styles */
</style>

4. Commencez à créer

Une fois le système de design installé, commencez à créer! Parcourez nos composants et modèles pour y trouver le code dont vous avez besoin pour votre projet.

Utilisation de Vite

Si vous utilisez Vite, il faudra ajouter une configuration additionnelle à 'vite.config.ts' afin d’empêcher que Vue ne signale un avertissement d’échec pour la résolution de composants (p. ex. « Failed to resolve component: gcds-header » [Échec de la résolution du composant : gcds-header]).

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: tag => tag.includes('-'),
        },
      },
    }),
  ],
});

Apportez votre contribution

Si vous souhaitez contribuer aux unités de style de Système de design GC, veuillez lire nos lignes directrices sur la contribution.

Licence

Code publié en vertu de la licence MIT (en anglais).