Vue implementation of the Carbon Design System
Vue implementation of the Carbon Design System A collection of Carbon Components implemented using Vue.js.
The library provides front-end developers & engineers a collection of reusable Vue components to build websites and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work.
As a community project contributions are not only welcome, but essential for the maintenance and growth of this project.
npm add @carbon/vue
or
$ yarn add @carbon/vue
src/main.js
import CarbonVue3 from '@carbon/vue';
import App from './App.vue';
const app = createApp(App);
app.use(CarbonVue3);
app.mount('#app');
See Hello Carbon Vue for an example Vue project with Carbon.
plugins/carbon-vue.js
import CarbonVue from '@carbon/vue';
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(CarbonVue);
});
See Hello Carbon Nuxt coming soon
vue2
branch
Vue 3 components for Carbon 10 have reached parity with the Vue 2 components. More work is needed especially around accessibility. If you want to improve Vue 3 components follow these guidelines.
main
branchCvCheckbox
as an example. The Vue 2 components use the options API.View available Vue Components here. Usage information is available in the notes provided with each story.
The following steps will build and publish the packages:
yarn
to install dependencies and bootstrap the packages;yarn build
to build all the packages including the storybook;If you just want to build an individual package you can limit the scope:
yarn build --scope @carbon/vue
yarn build --scope storybook
To start the storybook in a local server use yarn start
.
Just follow the steps listed below and you will be able to run the storybook.
vNext
branch, in order to install the dependencies run the command yarn install
on the root;cd storybook
to enter the storybook folder, then again run the command yarn install
to install the dependencies inside the storybook folder;yarn serve
inside the storybook folder.In other words, these are the commands you're going to use in order of execution:
yarn install
cd storybook
yarn serve
or
yarn install
yarn serve:storybook
This package uses IBM Telemetry to collect metrics data. By installing this package as a dependency you are agreeing to telemetry collection. To opt out, see Opting out of IBM Telemetry data collection. For more information on the data being collected, please see the IBM Telemetry documentation.