Carbon Design System

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.

The Vue library is maintained by members of the Carbon community. For support, contact the Carbon Vue team.

Resources

Carbon Components Vue

Try Vue components with CodeSandbox

Getting started

Assuming we’re starting with a new Vue CLI project:

npm create vue@latest
cd vue-project
Copy to clipboard

npm install @carbon/vue
Copy to clipboard

In src/main.js, after import App from './App.vue', add the following to include the carbon styles and components.

import 'carbon-components/css/carbon-components.css';
import CarbonComponentsVue from '@carbon/vue';

const app = createApp(App);
app.use(CarbonComponentsVue);
app.mount('#app');
// remove the line: createApp(App).mount('#app')
Copy to clipboard

Replace the contents of src/components/HelloWorld.vue with the following

<script setup>
  import { ref } from 'vue';

  const yourName = ref('');
  const visible = ref(false);
  function onClick() {
    visible.value = true;
  }
  function modalClosed() {
Copy to clipboard

That’s it! Now start the server and start building.

npm run dev
Copy to clipboard

Note: This isn’t the only way to bootstrap a carbon-components-vue application, but the combination of Vue CLI and the carbon-components scss is our recommended setup. See Hello carbon vue3 for a complete example app.

List of available components

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

Troubleshooting

If you experience any issues while getting set up with Carbon Components Vue, please head over to the GitHub repo for more guidelines and support. Please create an issue if your issue does not already exist.

Edit this page on GitHub

Frameworks: Angular

Frameworks: Svelte