Importing Global Libraries into Vue CLI (The Clean Way)

Last updated 1 year ago by Dave Berning

vuejs

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.

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.

Read full Article