Vue

Cobalt allows developers to use web-components in Vue.

Install

npm install @cobalt-design-system/vue-components

Usage

Note: All the Cobalt components are using Design Tokens so it is recommended to import them all in the project as global styles using the method of your choice. They are located in @cobalt-design-system/vue-components/dist/tokens/index.css.

To use @cobalt-design-system/vue-components in a Vue app the ComponentLibrary should be imported and used in the main.ts as below:

import { ComponentLibrary } from '@cobalt-design-system/vue-components'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(ComponentLibrary).mount('#app')

Any Cobalt component added in the html application will automatically load.

<cobalt-button label="Label"></cobalt-button>