Vue.js is another framework but is an open source. The salience of its use, or area of distinct purpose, lies within single-page applications (SPAs). This is because the framework focuses on delivering a seamless experience, but with fewer features than Angular, which can work alongside many other languages and still operate very quickly. Building applications that are quite large with Vue.js will result in very slow loading during use and even slower compilation.

Perhaps the best way to understand this is to consider jQuery and how it uses inline statements to call in a script to pages, whereas Angular uses core modules, each designed with a specific purpose. Vue.js lies somewhere in between the pure and simple jQuery for SPAs and Angular.

Using Webpack with the Vue.js project is done with the use of a dedicated loader.

The installation of vue-loader and vue-template-compiler is advised, unless you're an advanced user of Vue.js's template compiler. Follow these steps:

1. To follow this example, begin by installing vue-loader and vue-template-compiler with the following code:

npm install -D vue-loader vue-template-compiler

The template compiler has to be installed separately so that the version can be specified.

Vue.js has released a corresponding version of its template compiler with each new release. The two versions must be in sync so that the loader produces code that is runtime compatible. So, every time you upgrade one, you should upgrade the other.

The loader associated with Vue.js has a slightly different configuration from most loaders. Make sure you add the Vue.js loader's plugin to your Webpack configuration when handling files with extensions of .vue. 

2. This is done by altering the configuration of Webpack, shown in the following example using webpack.config.js:

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
 module: {
 rules: [
 // other rules
 {
   test: /.vue$/,
   loader: 'vue-loader'
  }
 ]
},
 plugins: [
 // make sure to include the plugin.
 new VueLoaderPlugin()
 ]
}

This plugin is required as it is responsible for cloning riles that are defined and applying them to language blocks that correspond to .vue files.

3. Using Vue.js, we add the following content:

new webpack.ProvidePlugin({ Vue: ['vue/dist/vue.esm.js', 'default'] });

The preceding code must be added as it contains the full installation of the ECMAScript module for Vue.js when used with bundlers. This should be present in the /dist folder of your project's npm package. Note that .ems. signifies the ECMAScript module. There are runtime-only and production-specific installation methods shown on the Vue.js installation page, which is available in the Further reading section of this chapter. UMD and CommonJS installations are similar and use the vue.js and vue.common.js files, respectively.

As our project will use the .esm format, it may be useful to know more about it. It has been designed to be analyzed statically, which allows bundlers to perform tree-shaking, which is the elimination of unused code. Note that the default file for bundlers is pkg.module, which is responsible for runtime-only ECMAScript module compilation. For more information, see the Vue.js installation page—the URL is available in the Further reading section of this chapter.

This concludes the content of this chapter regarding frameworks and libraries. You should now be in a strong position to work with complex projects that may even utilize more than one framework.