Building a Component in Three Frameworks

Vue offers an absolutely amazing first party CLI. To start a new project, run

vue create new-project

Honestly, this tool was magical, especially the vue serve command. It was crazy cool to be able to create any .vue file, then run vue serve and be able to view just that file being built and served in the browser.

Firefox | Chrome

Vue, like React, has multiple ways to structure a component file. I don’t have enough experience to speak to the pros and cons of each, but I chose to write all my components using the single file component approach.

Apparently you can use JSX with Vue, but none of the Vue developers I know have ever mentioned doing this. By default, Vue comes with its own template syntax that is similar to Svelte’s.

<script>  
  export default {
    name: 'Color',
    props: {
      color
    }
  }
</script>


  <div>
    <span>
      {{ this.color.score }}
    </span>
  </div>
</template>

Just like Svelte, JavaScript in a Vue component lives inside a <script> tag at the top of the file. Unlike Svelte, this code is required for a Vue component, and must contain a structured default export object. Vue components instantiate JavaScript classes, and Vue forces you to be declarative when defining a component’s dependcies. This makes sense if you think about writing the constructor() function of a regular class.

The name key corresponds to how the component will be referenced in other files. All the props need to be explicitly added to the props object. Once properties are assigned to the Vue component class, they can be used in the HTML by using the this. syntax. this in JavaScript can be kind of a hard thing to understand, but for this scenario think about it as “this component.”

Vue also needs to return a <template> tag in each component to register what HTML will be rendered. Interpolatin JavaScript in HTML uses “Mustache” syntax, or double curly brackets ({{ }}).

For composing components, Vue also uses the <slot> tag.

<script>  
  export default {
    name: 'Label'
  }
</script>

<template>
  <span>
    <slot />
  </span>
</template>

Like props, any imported components will need to be registered inside the <script> tag. After that, they can be used inside the <template> as custom elements.

<script>  
  import Label from './label.vue'

  export default {
    name: 'Color',
    props: {
      color
    },
    components: {
      Label
    }
  }
</script>

<template>
  <div>
    <Label>
      {{ this.color.score }}
    </Label>
  </div>
</template>

Passing props in Vue works mostly like React and Svelte, but with a few syntactical differences. Firstly, prop attributes have to be “kebab-case”. Vue props will also always use the double quotation (" ") syntax to declare all types of props, not just strings. Vue also makes a distinction between static props and dynamic props, the latter of which are prepended with v-bind:. Since the color chart will sometimes update when a user interacts with it, this is the syntax to use in this situation.

// row.vue

<script>  
  import Color from './color.vue'

  export default {
    name: 'Row',
    components: {
      Color
    },
    props: {
      color
    },
  }
</script>

<template>
  <tr>
    <Color 
      v-bind:name="this.color.name"
      v-bind:value="this.color.value"
      v-bind:score="this.color.score"
      v-bind:ratio="this.color.ratio"
    />
  </tr>
</template>

Vue, like Svelte, comes with a typing system that only requires a small amount of additional syntax. When registering props to a component, each prop can be assigned a value to define a type associated with each key.

<script>  
  export default {
    name: 'Color',
    props: {
      name: String,
      value: String,
      score: String,
      ratio: Number
    }
  }
</script>

<template>
  <td>
    <div title="`Ratio ${this.ratio}`">
      <span>
        {{ this.score }}
      </span>
    </div>
  </td>
</template>

Just like the other frameworks, objects can be passed down as props as well. Like Svelte, Vue offers a shorthand for writing out v-bind:. v-bind can be left off and dynamic props can be prepended with just :.

// row.vue
<script>  
  import Color from './color.vue'

  export default {
    name: 'Row',
    components: {
      Color
    },
    props: {
      color: Object
    },
  }
</script>

<template>
  <tr>
    // long form
    <Color v-bind:color="this.color" />
    // shorthand
    <Color :color="this.color" />
  </tr>
</template>

As you would probably expect, those values can be accessed via the color object prop.

<script>  
  export default {
    name: 'Color',
    props: {
      color: Object
    }
  }
</script>

<template>
  <td>
    <div title="`Ratio ${this.color.ratio}`">
      <span>
        {{ this.color.score }}
      </span>
    </div>
  </td>
</template>

Similar to Svelte, Vue also secretly bundles all of a components registered prop values into an object called $props, which can be referenced elsewhere in the component as this.$props. Unlike Svelte and React, however, there isn’t really a way to spread this value into a child component and it is made more for referencing passed in values elsewhere in the <script> tag.

Vue, just like Svelte, uses the same class attribute syntax as regular HTML.

<script>
  export default {
    name: 'Color',
    props: {
      color
    }
  }
</script>

<template>
  <td class='color-contrast-table__color'>
    <div class='color-contrast-table__color-block'>
      <span class='color-contrast-table__color-score'>
        {{ color.score }}
      </span>
    </div>
  </td>
</template>

Vue’s inline style attribute, however, is a little closer to React’s. Vue uses the v-bind:style syntax and needs to be passed an object. It can use regular, hyphenated CSS properties as keys as long as they’re surrounded with single quotation marks (' ').

Any attributes that need access to interpolated values needs to use a Vue directives. A directive is a special kdinf of attribute, usually prefixed with “v-” that lets Vue know it needs to interpolate that attribute in a special way.

<script>
  export default {
    name: 'Color',
    props: {
      color
    }
  }
</script>

<template>
  <td>
    <div v-bind:style="{ 'background-color': color.value }">
      <span>
        {{ color.score }}
      </span>
    </div>
  </td>
</template>

One awesome benefit of using a Vue single file component is the ability to add a <style> tag to a component in addition to a <script> tag. This works a lot like the Svelte <style> tag, but is more configurable. By default the styles will work like a global CSS stylesheet, but the tag itself can accept a scoped attribute. This will add generated classes and encapsulate the styles similar to Svelte.

<script>
  export default {
    name: 'Styles',
  }
</script>

<style>
  .color-contrast-table {
    ...
  }
</style>

<template>
  <div></div>
</template>

One thing worth mentioning here is that since a Vue component must contain a <template> tag and that tag must contain an element, you will have to put some random DOM element here. If that bothers you (it bothered me), there is an NPM package called vue-fragment that will allow you to return a ghost element that won’t actually render anything.

When it comes to using methods inside of components, Vue requires a bit more structure than the other two frameworks.

To define a value in the <script> section and use that value in the component body, it must be registered like other imports. In a single file component, data needs to be a function that returns an object of data values. If that data value is going to be defined as the result of an expression, that function needs to also be registered to the methods key of the Vue object.

<script>  
  import getLabelColor from './get-label-color.js'

  export default {
    name: 'Color',
    props: {
      color
    },
    methods: {
      getLabelColor
    },
    data: function() {
      return {
        textColor: this.getLabelColor(this.color.value)
      }
    }
  }
</script>

<template>
  <td>
    <div
      v-bind:style="{ 
        'background-color': color.value,
        'color': this.textColor
      }"
    >
      <span>
        {{ color.score}}
      </span>
    </div>
  </td>
</template>

Methods can also be defined as values inside the methods object, and can be run directly within the <template> section.

<script>  
  export default {
    name: 'Table',
    props: {
      colors,
      useStyles
    },
    methods: {
      getClassName: function() {
        if (this.useStyles) {
          return 'use-styles color-contrast-table'
        } else {
          return 'color-contrast-table'
        }
      }
    }
  }
</script>

<template>
  <table v-bind:class="getClassName()">
    <tbody>
      ...
    </tbody>
  </table>
</template>

For methods that determine which classes are added to an element, Vue allows for binding a directive to the class attribute. You can pass an object to a bound class attribute, and if the value returns truthy the key will be added to the element’s class list.

<script>  
  export default {
    name: 'Table',
    props: {
      colors,
      useStyles
    }
  }
</script>

<template>
  <table v-bind:class="{ 'use-styles': useStyles }">
    <tbody>
      ...
    </tbody>
  </table>
</template>

Vue templates also come with a built in logic system, but rather than using custom tags it uses directives.

Vue’s template directive attributes are interesting because they can be applied directly onto a tag, or can be applied to a wrapping <template> element that will function as a “rootless” element during render.

<script>  
  import Header from './header.vue'
  import Color from './color.vue'

  export default {
    name: 'Row',
    components: {
      Header,
      Color
    },
    props: {
      color
    },
  }
</script>

<template>
  <tr>
    <Header :editNames="editNames" :editValues="editValues" />

    // directive directly on element
    <Color
      v-for="(color, index) in color.combinationScores"
      :key="index"
      :color="color"
    />

    // with wrapping element
    <template v-for="(color, index) in color.combinationScores">
      <Color
        :key="index"
        :color="color"
      />
    </template>

  </tr>
</template>

Vue also has both v-if and v-else directives that work how you would expect. Just like with v-for these can be applied on a wrapping <template> or directly to an element.

<script>
  export default {
    name: 'Header',
    props: {
      editNames,
      editValues
    },
  }
</script>

<template>
  // directive directly on element
  <th>
    <input v-if="editNames" type='text' v-bind:value="color.name" />
    <span v-else>{{ color.name }}</span>

    <input v-if="editValues" type='color' v-bind:value="color.value" />
    <span v-else>{{ color.value }}</span>
  </th>

  // with wrapping element
  <th>
    <template v-if="editNames">
      <input type='text' v-bind:value="color.name" />
    </template>
    <template v-else>
      <span >{{ color.name }}</span>
    </template>

    <template v-if="editValues">
      <input type='color' v-bind:value="color.value" />
    </template>
    <template v-else>
      <span >{{ color.value }}</span>
    </template>
  </th>
</template>

Vue also comes with one extra operator that the other two frameworks don’t include — v-show. v-show works visually just like v-if, but instead of not rendering an element it still renders the markup, but uses CSS to hide it from the DOM.

<Color v-show="color.score !== 'fail'" color={color} />

// with wrapping element
<template color.score !== 'fail'>
  <Color color={color} />
</template>

This could be accomplished in React or Svelte as well, but it’s nice of Vue to provide such an easy syntax for it.

Vue has two state-like concepts: computed and watched properties. A computed property is one that is calculated based on some other data in the app and will remain cached after updating. A watch property is like a computed property that requires a more custom implementation for how the data changing should be handled. The Vue docs recommend using computed over watch for most scenarios that don’t involve asynchronous data, so that seemed like the right option for me.

<script>  
  import generateChart from 'color-contrast-table'
  import Table from './table.vue'

  export default {
    name: 'Chart',
    components: {
      Table
    },
    props: {
      colors
    },
    methods: {
      generateChart,
    },
    data() {
      return {
        colorArray: this.$props.colors
      }
    },
    computed: {
      colorChart: function () {
        return this.generateChart(this.colorArray)
      }
    }
  }
</script>

<template>
  <Fragment>
    <Styles/>
    <Table v-bind:colors="colorChart" /> 
  </Fragment>
</template>

It feels slightly extraneous to have to assign a data.colorArray value and pass it through to computed.colorChart, but since Vue props are also immutable this is necessary. props.colors can’t be changed, but data.colorArray can, and whenever it does computed.colorChart will also change and cause a re-render.

Vue uses an event-driven system to update state. Rather than having a function be passed down and bound to the change event of an input, an event is emitted by the input and then “caught” by a parent component. Custom events are defined by using the v-on: syntax, and are then passed an $emit() function. The first argument of $emit() is the name of the event to be emitted and the rest will be passed into the function when the event is caught.

<script>  
  import getLabelColor from './get-label-color.js'
  import EditName from './edit-name.vue'
  import EditValue from './edit-value.vue'

  export default {
    name: 'Header',
    props: {
      color,
      index,
    },
    methods: {
      getLabelColor,
      namechange(index, value) { this.$emit('namechange', index, value) },
      valuechange(index, value) { this.$emit('valuechange', index, value) }
    }
  }
</script>

<template>
  <th>
    <input
      type='text'
      :value="value"
      v-on:input="$emit('namechange', index, $event.target.value)"
    />

    <input
      type='color'
      :value="value"
      v-on:input="$emit('valuechange', index, $event.target.value)"
    />
  </th>
</template>

These events can be caught and passed upwards so that a deeply nested child can update a value higher than its direct parent. For less typing, the @ symbol can be used as a shorthand for v-on.

// header.vue

methods: {
  namechange(index, value) { this.$emit('namechange', index, value) },
  valuechange(index, value) { this.$emit('valuechange', index, value) },
}
...
<input 
  type='text'
  :value="color.name"
  @input="$emit('namechange', index, $event.target.value)"
/>
<input 
  type='color'
  :value="color.value"
  @input="$emit('valuechange', index, $event.target.value)"
/>

// other components in between

methods: {
  namechange(index, value) { this.$emit('namechange', index, value) },
  valuechange(index, value) { this.$emit('valuechange', index, value) },
}
...
<Header
  @namechange="namechange"
  @valuechange="valuechange"
/>

//chart .vue

methods: {
  namechange: function (index, value) {
    ...
  }
  valuechange: function (index, value) {
    ...
  }
  ...
  <Table
    @namechange="namechange"
    @valuechange="valuechange"
  >
}

This might look like props being passed down, but this data flow is actually starting in the nested component and working its way upward. Once this function has been passed upwards to the same component in which the original computed values live, a method with the same name as the emitted event can be run to assign new data.

<script>  
  import generateChart from 'color-contrast-table'
  import Table from './table.vue'

  export default {
    name: 'Chart',
    components: {
      Table,
    },
    props: {
      colors: Array,
    },
    methods: {
      generateChart,
      namechangefunction (index, value) {
        this.colorArray[index].name = value
      },
      valuechangefunction (index, value) {
        this.colorArray[index].value = value
      }
    },
    data() {
      return {
        colorArray: this.$props.colors
      }
    },
    computed: {
      colorChart: function () {
        return this.generateChart(this.colorArray)
      }
    },
  }
</script>

<template>
  <Fragment>
    <Styles/>
    <Table
      :colors="colorChart"
      @namechange="namechange"
      @valuechange="valuechange"
    />
  </Fragment>

Like I mentioned before, we can’t mutate props values, so instead these functions needs to change computed.colorArray. One nice side effect of this requirement is that unlike in React and Svelte where we had to spread an existing value into a new object to update one value, Vue can directly change one piece of the computed.colorArray object.

Vue is super interesting, and as a direct alternative to React there’s a lot about it that appealed to me. At first it felt like registering props, components, methods, data, etc… in each file felt like a lot of work, but the more I worked with Vue the more I appreciated its strong guidance system. For this being my first Vue project, the compiler threw a LOT of helpful console warnings and errors that really led to an overall smooth developer experience.

That said, I found Vue’s versions can be kind of confusing. I can imagine this is how a lot of people feel not really being familiar with class vs function components in React, but I got pretty mixed up several times trying to use version 3 solutions to version 2 problems, or trying to do something in a single file component that was meant for a regular Vue instance.

This is just a personal opinion, but I think its super weird to use double quotes for interpolation.

// React
<div attribute={value}>text</div>

// Svelte
<div attribute={value}>text</div>

// Vue
<div v-attribute="value">text</div>

I have to say that most of my compile errors were around trying to use curly brackets when Vue wanted double quotes. Quotation marks pretty heavily signify a string type in my mental model at this point.