As we promised, in this chapter we are going to review single file components. To build these single file Vue components we need tools like Webpack with vue-loader
, or Browserify with vueify
. For our examples, we are going to use Webpack, which we've already seen how it works. If you prefer Browserify or something else, feel free to use it.
Single file components or Vue components allow us to specify a template, a script, and style rules, all in one file using *.vue
extension. So, each component encapsulates its CSS styles, template, and JavaScript code, in the same place. And that's were Webpack steps in, to bundle this new type of files with the others.
In addition, we need vue-loader
(https://github.com/vuejs/vue-loader) to transform Vue components into plain JavaScript modules. vue-loader
is a loader for Webpack that also provides a very nice set of features, such as ES2015 enabled by default, scoped CSS for each component, and more.