Importing Global Libraries into Vue CLI (The Clean Way)

If you’re working with the Vue CLI and you’re trying to import global JS/CSS libraries, you’re not alone. Some solutions will tell you to just add the package with a require statement or an @import statement. That’s fine but there is a time and a place to use the @import statement in Vue and importing a global CSS library isn’t one of them. Instead, let’s use an ES6 ‘import’ statement.

…[T]here is a time and a place to use the @import statement in Vue and importing a global CSS library isn’t one of them.

What We Will Be Importing

We will be importing Bulma, the up-and-coming Flexbox CSS framework. I won’t get into too much detail about it here but it’s all based on Flexbox. It’s very easy to pick up and learn and requires less markup than Bootstrap.

What We Will Be Doing

For this, we will be creating an alias for our Bulma dependency. This will be very familiar to you if you read my other post about creating an alias for a React dependency.

For this, I’m assuming that you already have the Vue CLI installed. If not, it’s easy to install. Just run npm install -g vue-cli, vue init webpack my-project, and follow the prompts.

Creating the Alias

First, to add the dependency let’s use run the follow NPM command:

npm install bulma --save

After that is done, let’s dive into our build/webpack.dev.conf.js file and paste the following code right above the module object.

resolve: {
    extensions: ['.css'],
    alias: {
      'bulma': resolve('node_modules/bulma/css/bulma.css'),
    }
}

NOTE: If you want to use the SCSS file, there are additional steps you should take prior to this article.

Now that your alias is created, let’s import it into our src/main.js file. Importing the dependency here will allow it to be used across the entire application.

import bulma from 'bulma';

That’s it! Really.

Granted, you could just add the relative path to Bulma but this is much cleaner and easier to read. Plus, you now know how to create an alias’ in Webpack for Vue!

Thanks for reading. If this helped you at all, please share and follow me on Twitter!

Originally published at daveberning.io on January 6, 2018.