Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Organize + Automate + Deploy = Webpack Chapter 16

We will install vue-bulma-modal, which is a component written in Vue with the Bulma

CSS framework:

npm install --save vue-bulma-modal bulma

In the preceding command, we installed bulma too, which contains the actual CSS styles.

To actually make the styles work, we need to turn them into JavaScript for Webpack; this

means we need to install a couple of loaders:

npm install --save-dev node-sass sass-loader

The SASS loader is already configured, so there is no need to touch anything. What we will

touch though, is the Webpack configuration related to the Babel loader (learn more about it
in the Developing with continuous feedback with hot reloading recipe).

In the official template (but this may change, watch out), there is a line that prevents

Webpack from compiling dependencies. Go to build/webpack.base.conf.js and find

this block:

{

test: /.js$/,

loader: 'babel-loader',

include: [

path.join(projectRoot, 'src')

],

exclude: /node_modules/

},

Depending on the version of Webpack you are using, you may need to

slightly tweak the loader syntax. In older versions of Webpack, for

example, you would write babel instead of babel-loader.

You have to remove the highlighted line and, instead, write the following:

{

test: /.js$/,

loader: 'babel-loader',

include: [

path.join(projectRoot, 'src'),

path.join(projectRoot, 'node_modules/vue-bulma-modal')

]

},

This is telling Webpack to compile the component we just installed with babel-loader.