@carbon/vue v1 released into the wild
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
☞ Learn ECMAScript 2015 - ES6 Best Course
☞ Vue JS: From Beginner to Professional
☞ Vue JS 2 Course for Students with ZERO ES6 foundation
Suggest:
☞ Is Vue.js 3.0 Breaking Vue? Vue 3.0 Preview!
☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework
☞ Learn Vue.js from scratch 2018
☞ React vs Vue - I Built the Same App in Both Frameworks