@carbon/vue v1 released into the wild

If you haven’t heard of the Carbon Design System before, check us out! We’re a design system at IBM, shipping open-source styles and component libraries in various frameworks for anyone building on the web.

Since the time Vue.js 2 was little more than a twinkle in Evan’s eye my team and I, front-end prototypers in IBM design, have been big fans of Vue.js. We love the way single file components allow us to separate out our styling, script and markup. It even received the highest form of praise an Englishman is capable of giving without blushing when a respected colleague said: “It just does what you’d want it to do”.

So it was with some frustration we watched the popularity of other frameworks steam ahead within IBM, in no small part due to an excellent IBM led implementation of the Carbon Design System in React. Motivated by little more than a preference for single file components over JSX @carbon/vue was born.

After a number of months, well there is a day job to contend with, I find myself on vacation watching my kids fly endlessly round an ice rink. Spurred on by a knee injury that is preventing a better work-life balance I am excited to announce that today @carbon/vue is turning 1.0.0.

Getting started with @carbon/vue — in Codepen

Well the easiest place to go and have a play is in CodePen

but that’s not really getting started. Instead let’s create a new project using Vue CLI 3.

Using @carbon/vue in a project

A new project

In your nearest available command prompt

$vue create example

Create a project with babel, node-sass and any of your other favourite settings.

cd your-example-project
yarn add @carbon/vue

or npm if you prefer

npm install @carbon/vue

Using @carbon/vue all at once

In your main js file (where you include Vue)

// No need for Babel
import CarbonComponentsVue from '@carbon/vue';

alternatively if wanting to specify babel presets

// need babel
import CarbonComponentsVue from '@carbon/vue/src/index';
Vue.use(CarbonComponentsVue);

Using @carbon/vue components one at a time

In your main js file (where you include Vue)

// No need for Babel
import { CvButton } from '@carbon/vue';

In a component file

<script>
...
import CvButton from '@carbon/vue/src/components/cv-button/cv-button';
...
components: {
  CvButton,
},
...
</script>

Example new project

After creating a new project with Vue CLI and adding @carbon/vue to your package.

Add an import for @carbon/vue in src/main.js

Import carbon styles in src/App.vue

Replace the contents of src/components/HelloWorld .vue

$yarn serve

And…

A little further

OK so your five minutes into your use of @carbon/vue and you’ve stuck a button on a screen, so let’s go a little further.

Head back to HelloWorld.vue and replace it with the following which uses a CvTextInput with v-model and adds some useful links. It also adds the data and computed values to work with CvTextInput.

It’s worth noting that @carbon/vue wrappers for native components behave like native components raising standard events and working with v-model, not just CvTextInput.

Save this image as src/assets/AtCarbonVue.png

carbon-components-vue on github — @carbon/vue on npm — storybook examples

Replace App.vue with the following which makes use of the above logo.

And now…

That’s all folks

The Carbon Design System is an open-source design system for IBM. It is a series of individual styles, components, and guidelines for creating unified User Interfaces. We’re always looking for contributors for our projects, if you’re interested please check out one of our projects in the IBM GitHub Organization.

Have any questions or concerns about the Carbon Design System? Please reach out to carbon@us.ibm.com. Thanks!