Install 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.

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>