Usage with Vue.js

To integrate @gov-design-system-ce/vue into a Vue.js application apply following changes to your project:

1. Install provided Vue.js wrapper for Design System ​

npm install @gov-design-system-ce/vue@latest

2. Import styles, icons & fonts ​

See the for developers page.

3. Import components ​

Modify your main.ts to match following snippet

// import ....
// -------- ADD COMPONENT LIBRARY --------
import { ComponentLibrary } from '@gov-design-system-ce/vue/dist/plugin';

createApp(App)
    .use(ComponentLibrary) // <--- make Vue recognize imported components
    .mount('#app')

4. Use the components in you application ​

Every component needs to be imported before used. So for instance if you are trying to use Input field you can do it like this

<script setup lang="ts">
  import { ref } from "vue";
  import { GovFormInput } from '@gov-design-system-ce/vue' // <-- import the component
  const data = ref('')
</script>

<template>
  <GovFormInput v-model="data"></GovFormInput>
</template>