@carbon/vue v1 released into the wild

@carbon/vue v1 released into the wild

  • 2019-02-21 02:47 AM
  • 167

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

main.js

import Vue from "vue";
import App from "./App.vue";

// add an import for @carbon/vue
import CarbonComponentsVue from "@carbon/vue/src/index";
Vue.use(CarbonComponentsVue);

new Vue({
  render: h => h(App)
}).$mount("#app");

Import carbon styles in src/App.vue
App.vue

// ... Add carbon styles

<style lang="scss">
@import "~carbon-components/scss/globals/scss/styles.scss";
// ...
</style>

Replace the contents of src/components/HelloWorld .vue

HelloWorld.vue

<template>
  <cv-button @click="onClick">Hello @carbon/vue</cv-button>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    onClick() {
      alert('Hello @carbon/vue');
    }
  }
}
</script>
$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.

HelloWorld-2.vue

<template>
  <div class="hello">
    <cv-text-input
      :label="label"
      placeholder="What is yrou name?"
      v-model="yourName"
    ></cv-text-input>

    <cv-link
      href="https://github.com/carbon-design-system/carbon-components-vue"
      >@carbon/vue on github</cv-link
    >
    <cv-link href="https://www.npmjs.com/package/@carbon/vue"
      >@carbon/vue on npm</cv-link
    >
    <cv-link href="http://http://vue.carbondesignsystem.com"
      >Storybook samples</cv-link
    >
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      yourName: ""
    };
  },
  computed: {
    label() {
      return `Let's say hello properly: "Hello ${
        this.yourName.length ? this.yourName : "World!"
      }"`;
    }
  }
};
</script>

<style lang="scss" scoped>
.hello {
  display: flex;
  flex-direction: column;
  width: 600px;
  margin: 50px auto;
  a {
    margin: 20px 0 0;
  }
}
</style>

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.

App-2.vue

<template>
  <div id="app">
    <div class="hero">
      <img class="logo" alt="Vue logo" src="./assets/logo.png">
      <p>meet</p>
      <img class="logo logo--nudge" alt="@Carbon/vue logo" src="./assets/AtCarbonVue.png">
    </div>
    <hello-world/>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

<style lang="scss">
@import "~carbon-components/scss/globals/scss/styles.scss";
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  width: 50%;
  max-width: 800px;
  margin: 0 auto;
}
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.logo {
  height: 200px;
  margin: 20px;
}
.logo--nudge {
  margin-left: 83px;
}
.cv-button {
  margin: 20px 0;
}
</style>

And now…

30s ad

Vue.js Fast Crash Course

Learn ECMAScript 2015 - ES6 Best Course

Vue JS: From Beginner to Professional

Vue JS 2 Course for Students with ZERO ES6 foundation

ASP.NET Core 2.0 Vue.JS