GC Design SystemStart to useInstall GC Design System
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

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 @gcds-core/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 '@gcds-core/components-vue';

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

3. Import GC Design System styles

There are 2 ways to do this:
  • Import styles to main.js.
  • Import styles to App.vue.
a. Import the styles to your main.js file, alongside your style.css: 
import '@gcds-core/components-vue/gcds.css';
import './style.css';
b. Import the styles to your App.vue using the HTML style tag: 
<style src="@gcds-core/components-vue/gcds.css">
  /* global styles */
</style>
4. Add CSS Shortcuts stylesheet We recommend using GC Design System CSS Shortcuts to apply predefined CSS utility classes. These classes align with our components and help you build faster while maintaining consistency. Using CSS Shortcuts in your project is optional. It can be added alongside your existing CSS. Navigate to your project’s root folder and run the following command: 
npm install @gcds-core/css-shortcuts
You have the same options as above:
  • Import styles to main.js.
  • Import styles to App.vue.
a. Import the CSS Shortcuts styles to your main.js file, alongside your style.css: 
import '@gcds-core/css-shortcuts/dist/gcds-css-shortcuts.min.css';
import './style.css';
b. Import the CSS Shortcuts styles to your App.vue using the HTML style tag: 
<style src="@gcds-core/css-shortcuts/dist/gcds-css-shortcuts.min.css">
  /* global styles */
</style>
5. Start building Once you’ve installed the design system, you can start pulling the code you need into your project. Start with a template Start with a basic page template. It combines multiple components for common GC pages. Start with components Add components to build a product that meets your needs. Start with your code Add style classes to HTML using CSS Shortcuts. This is for your custom code.
Need help? If you need help, reach out to us and we'll help you get started.
2026-09-02