@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
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!