Single file components with Webpack

Vue was a game changer mostly because it changed the way to partition responsibilities. It wasn't the first to do that, but it certainly extended on that. Earlier, we used one file for HTML, one for CSS, and one for JavaScript. Little did we know that the three files were all about the same thing--components. Yet, they split several components vertically instead of horizontally. In Vue, we keep components well isolated in a single file with the help of tools such as Webpack. In this recipe, you will learn how.

 

Getting ready

This recipe assumes that you already know how to register a component (the Creating and register a component recipe). We will also use npm and vue-cli (the Choosing a development environment recipe).

How do do it...

We're assuming that you already have vue-cli installed in your terminal type:

mkdir my-component
cd my-component
vue init webpack-simple

You will then be asked some questions; you can answer with whatever you like; at the end...