@carbon/vue/exmaple

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>