Repository files navigation

Vue implementation of the Carbon Design SystemA collection ofCarbon Components implemented usingVue.js.

Thelibrary 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

importCarbonVue3from'@carbon/vue';importAppfrom'./App.vue';constapp=createApp(App);app.use(CarbonVue3);app.mount('#app');

SeeHello Carbon Vue for an example Vue project with Carbon.

plugins/carbon-vue.js

importCarbonVuefrom'@carbon/vue';exportdefaultdefineNuxtPlugin(nuxtApp=>{nuxtApp.vueApp.use(CarbonVue);});

SeeHello Carbon Nuxtcoming soon

• Vue 2 support will end on Dec 31, 2023. Learnmore.
• Upgrading from Vue 2? Check out theMigration Guide.
• Vue 2 components can be found on thevue2branch

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.

1. Fork this repo and checkout themain branch
2. Look to see which components are currently being improved. You can do this by looking in theissues list.
3. If you want to improve a component, look in the open issue list to see if someone else might already be working on it. Look for issues with a "V3 - Vue3" label and the name of the component. For example "CvDatePicker - improving accessibility".
4. If no one else is already working on it, create an issue using the "🍪 Vue 3 - improve component" and label it as above.
   • Work on the component and create a PR when you are ready.
   • Components are expected to be implemented assingle file components using the Vuecomposition api. SeeCvCheckbox as an example. The Vue 2 components use the options API.
   • You should reference the DOM in the React components storybook and be sure to include any accessibilityimprovements that might be there.
   • You should update the story and test cases for the component if applicable. Sometimes the story might need updatingalmost always the test cases for the component will need updates.
   • If you have question tag @davidnixon in your issue and let me know how I can help.

CHANGELOG.md

View available Vue Componentshere. Usage information is available in the notes provided with each story.

The following steps will build and publish the packages:

• clone or download the repo;
• runyarn to install dependencies and bootstrap the packages;
• runyarn 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/vueyarn build --scope storybook

To start the storybook in a local server useyarn start.

To test publishing to a npm registry:

cd local-devdocker-compose up# open a new terminalyarn buildnpm add-user --registry http://0.0.0.0:4873/# any username, password, & email will work# try: carbon, vue, & carbon-vue@example.comyarn test:publish# maybe change some things and try againyarn buildyarn test:unpublishyarn test:publish

Just follow the steps listed below and you will be able to run the storybook.

1. After the checkout to thevNext branch, in order to install the dependencies run the commandyarn install on the root;
2. Now, run the commandcd storybook to enter the storybook folder, then again run the commandyarn install to install the dependencies inside the storybook folder;
3. Finally, run the commandyarn serve inside the storybook folder.

In other words, these are the commands you're going to use in order of execution:

yarn installcd storybookyarn serve

or

yarn installyarn serve:storybook

This package uses IBM Telemetry to collect de-identified and anonymized metrics data. By installingthis package as a dependency you are agreeing to telemetry collection. To opt out, seeOpting out of IBM Telemetry data collection.For more information on the data being collected, please see theIBM Telemetry documentation.