Using external components in your Webpack project

Using external Vue components in your own project is usually straightforward. Sometimes though, things aren't so simple. In particular, there are some configurations in the official templates with Webpack that (weirdly) actually prevent you from using some external components. In this recipe, we will install a modal dialog component from the Bulma project.

Getting ready

In this recipe, we will tweak the Webpack configuration. It is suggested to have completed the Organizing your dependencies with Webpack recipe before taking up this task.

How to do it...

We will start with a fresh Webpack project. You can create a new one using the vue-cli and the official Webpack template. My suggestion, however, is to begin with my Webpack template, which is a clean slate. To do it, run the following command in a new directory:

vue init gurghet/webpack

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

npm install...