Single-File Components in Vue.js: Benefits and Setup Guide

Global components are defined in many Vue projects using Vue.component, followed by new Vue ({el: ?#container?}) to target a container element that exists in the body of every page.

The above method could work very well for small to medium-sized projects where JavaScript is used to enhance certain views alone. However, in more complex projects or when our frontend is entirely driven by JavaScript, in this case the following disadvantages become apparent:

• Global definitions will force unique names for every component
• String templates usually lack syntax highlighting and will require ugly slashes for multiline HTML
• The fact that there is no CSS support means that while HTML and JavaScript are modularized into components, CSS will be conspicuously left out
• No build step restricts us to HTML and ES5 JavaScript alone, and not preprocessors like Pug (formerly Jade) and Babel

All these problems are solved by single-file components with a .vue extension, this is made possible with build tools like Browserify and Webpack.

An example of a file is shown in the greeting.Vue:

greeting.vue

<template>
   <p>{{greeting}} World</p>
</template>
<script>
Module.exports = {
Data:function(){
  Return {
	greeting:?Hi?
  }
}
</script>
<style scoped>
p{
     font-size:2em;
     Text-align:center;
    }
</style>

Then we get:

• Complete syntax highlighting
• CommonJS modules
• Component-scoped CSS

Just as promised, preprocessors such as Babel, Pug and Stylus for more-rich components and cleaner.

greeting.vue

<template lang=?jade?>
 div
    p {{greeting}}World!
     Other-component
  </template>
<script>
 import OtherComponent from ?./OtherComponent.vue?
export default{
data(){
    return{
    greeting: ?Hello?
   }  
},
components:{
      otherComponent
  }
}
</script>
<style lang=?stylus? scoped>
p 
   font-size 2em
    text-align center
</style>

The languages (like jade and stylus) are only examples. We can use Buble, TypeScript, PostCSS, SCSS or any other processor that can make one more productive.

What About Separation of Concerns?

It is important thing to note is that separation of concerns is not equal to separation of file types. In modern user interface development, we have found that rather than dividing the codebase into three huge layers that interweave with one another, it is much more sensible to divide them into loosely-coupled components and compose them. Inside a component, its template, logic and styles are inherently coupled, and collocating them actually makes the component more maintainable and cohesive.

Even if one does not like the idea of Single-File Components, we can still leverage its hot-reloading and pre-compilation features by separating your JavaScript and CSS into separate files:

<!-- my-component.vue -->
<template>
  <div>This is going to be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

Getting Started

For Users New to Module Build Systems in JavaScript

When working with .vue components, we are actually entering the realm of advanced JavaScript applications. This means learning to use a few additional tools if we haven?t already:

• Node Package Manager (NPM).
• Modern JavaScript with ES2015/16: To work with .vue component one must be comfortable with ES2015/2016, this does not mean memorize everything but at least leave a page reference.

Check out Vue CLI 3 after you have feeling Follow the instructions and you will have a Vue project with .vue components, ES2015, Webpack and hot-reloading in no time!

For Advanced Users

The CLI takes care of most of the tooling configurations for us, it also allows fine-grained customization through its own config options.

In case we prefer setting up our own build setup from scratch, we will need to manually configure webpack with vue-loader.

Previous: Using Filters in Vue.js for Advanced Text Formatting
Next: Vue.js Unit Testing: Guide with Jest and Vue Test Utils.