@carbon/vue is a community maintained Vue 3 port of the Carbon components

A design system ported to Vue, maintained by its users

carbon-components-vue is the Vue implementation of the Carbon Design System, a collection of Carbon components built with Vue.js, and it is organised as a Carbon community project. The README is explicit about what that means in practice: contributions are not only welcome but essential for the maintenance and growth of the project. That is a meaningful statement from a library whose components end up in front of enterprise users. The library is described as providing front end developers and engineers with a collection of reusable Vue components to build websites and user interfaces, and the stated benefit of adopting it is consistent markup, styles and behavior across both prototype and production work. The project sits in the wider Carbon ecosystem, alongside the React components repository, and the Vue implementation is explicitly a port of that set rather than a redesign, which is why the components are named for their Carbon equivalents, with the Cv prefix on component names such as CvCheckbox and CvDatePicker.

Installation is one package and one plugin call

The package is published to npm as @carbon/vue, and the install is the standard one you would expect for a design system library.

npm add @carbon/vue

Yarn works as well, and the manifest pins Yarn 3.2.0 as the package manager, so the project is set up for a modern Yarn rather than the classic one.

$ yarn add @carbon/vue

Registering the components is a single plugin installation in the application entry point.

import CarbonVue3 from '@carbon/vue';
import App from './App.vue';
const app = createApp(App);
app.use(CarbonVue3);
app.mount('#app');

The library is a global plugin rather than a set of individual imports, which is the pattern the Carbon components use in other frameworks too, and it means the whole component set is available after one call. The README points to a Hello Carbon Vue example project maintained separately under the IBM organisation for people who want to see a working setup rather than a snippet, and the Nuxt case is handled with a plugin file of its own.

import CarbonVue from '@carbon/vue';

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.use(CarbonVue);
});

Storybook is the component documentation

The list of available components lives in the Storybook rather than in a table in the README, and the usage information for each component is in the notes provided with its story. The available components are listed at the project's documentation site, and the stories double as the source of the web-types file that editors use to offer component completion, which the build pipeline generates with a documentation tool and writes to a JSON file in the distribution. The repository has its own Storybook configuration, a storybook directory, and a vetur configuration for editor support, and there is a dedicated accessibility testing document in the root. For a team adopting a design system, that arrangement is the point: the Storybook is where designers, product people and developers look at the same component, and where the accessibility notes for a given component live next to its usage example.

The remaining Vue 3 work is mostly accessibility

The README states that the Vue 3 components for Carbon 10 have reached parity with the Vue 2 components, and then immediately qualifies the claim: more work is needed, especially around accessibility. The contribution guidance that follows is a good description of how that work is coordinated. You fork the repository and check out the main branch, look at the issues list to see which components are currently being improved, check whether someone else has already claimed the one you want, and only then create an issue, using a specific issue template and a label that names the component, with CvDatePicker and improving accessibility given as the example. The implementation rules are equally specific: components are expected to be single file components using the composition API, with CvCheckbox given as the reference implementation, whereas the Vue 2 components use the options API. You are also asked to reference the DOM in the React components storybook and to carry over any accessibility improvements made there, which is how the port stays aligned with the source implementation.

IBM Telemetry is collected unless you opt out

The package uses IBM Telemetry to collect de-identified and anonymised metrics, and the README states that installing the package as a dependency means you are agreeing to telemetry collection, with a documented opt out process and a link to the telemetry documentation describing what is collected. For most developers this is a line they skim. For an enterprise user it is not, because an unexplained outbound metric call from a front end library is exactly the kind of thing a security review asks about, and the answer has to be more than a sentence. The dependency is visible in the manifest as a runtime dependency alongside the icon package, the core Carbon components package and the VueUse core library, and the manifest also runs a postinstall script, which is a second thing worth understanding in a locked down build pipeline. The transparent framing, a named package, a documented opt out and a public description of the collected data, is better than the silent alternative, and it is the difference between a library you can approve and one you cannot.

A Lerna and Yarn monorepo with a local registry for publish testing

The build and release setup is more involved than the install suggests, which is normal for a design system that also ships a Storybook. The repository uses Lerna, Yarn workspaces and the Vue CLI service, with Jest for unit tests, an ESLint and Stylelint setup, Prettier for formatting and a release shell script. The documented build steps are to clone the repository, run yarn to install dependencies and bootstrap the packages, and run yarn build to build all the packages including the Storybook, with scope flags if you only want to build one. To run the Storybook locally you install dependencies at the root, change into the storybook directory, install again, and serve it.

yarn install
cd storybook
yarn serve

There is also a script that publishes to a local registry in a container, which is how the maintainers test a release without touching npm.

cd local-dev
docker-compose up
# open a new terminal
yarn build
npm add-user --registry http://0.0.0.0:4873/
# any username, password, & email will work
# try: carbon, vue, & [email protected]
yarn test:publish

The release history tells the rest of the story. The package is at 3.0.32, published on 2026-08-25, with 3.0.31 in July 2026 and 3.0.30 in December 2025, and the last push was on 2026-10-17, so the project is active and shipping patch releases to a stable 3.x line.

Editorial conclusion

carbon-components-vue suits a team that has to ship an IBM Carbon interface in Vue 3 and does not want to rebuild the component set, since the library covers the same Carbon 10 components the React implementation offers and documents each one through Storybook. It is the wrong choice for a Vue 2 project, since that support ended on 2023-12-31 and lives on a separate branch, and the wrong choice for a team that cannot accept an opt out telemetry dependency without checking its own policy. Verify three things before you adopt it: that the components you need exist in the Storybook list rather than in the planned backlog, that the accessibility state of the specific components you use is acceptable, since the README says more work is needed in that area, and that your build tolerates the postinstall script and the telemetry package, since the manifest runs a postinstall hook and pulls in the IBM telemetry library. The licence is Apache-2.0 and the last push was on 2026-10-17.

Frequently asked questions

Official sources

1. carbon-design-system/carbon-components-vue on GitHub
2. License: Apache-2.0
3. Project website
4. README
5. Releases