Develop – Carbon Design System

Carbon Vue library
Getting started
Troubleshooting

Resources

Try Vue components with CodeSandbox.

Carbon Vue library

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.

Getting started

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

$ vue create my-project
Vue CLI v3.5.2
? Please pick a preset: default (babel, eslint)
$ cd my-project

Using Yarn

$ yarn add @carbon/vue

Or npm

$ npm install @carbon/vue

In src/main.js add the following to include the carbon styles and components.

import 'carbon-components/css/carbon-components.css';
import CarbonComponentsVue from '@carbon/vue/src/index';
Vue.use(CarbonComponentsVue);

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

<template>
  <div class="sample">
    <h1>Example use of @carbon/vue</h1>
    <cv-text-input
      label="Who are you?"
      v-model="yourName"
      placeholder="your name"
    />
    <cv-button @click="onClick">Hello {{yourName}}</cv-button>
    <cv-modal :visible="visible" @modal-hidden="modalClosed">
      <template slot="title"
        >Welcome to @carbon/vue {{yourName}}</template
      >
      <template slot="content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, seed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
      </template>
    </cv-modal>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        yourName: '',
        visible: false,
      };
    },
    methods: {
      onClick() {
        this.visible = true;
      },
      modalClosed() {
        this.visible = false;
      },
    },
  };
</script>
<style>
  .sample {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 600px;
    margin: 5% auto;
  }
  .cv-text-input {
    margin: 30px 0;
  }
</style>

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

Using Yarn

$ yarn serve

Or npm

$ npm serve

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.

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

Develop: Angular

Develop: Other frameworks