Adding Bulma to a Nuxt.js project should be easy right? But what you probably don’t know is that for you to get the best of the framework you need to import it the right way. In this short article I’ll teach you how to do so, stay tuned.

Setup

The first thing you want to do is add Bulma to the project’s dependency, run the following command:

yarn add @nuxtjs/bulma

You can use npm if you didn’t choose yarn during installation.

Next, for us to leverage the full potential of Bulma we must add some additional packages. Which will add sass support to our project.

yarn add -D node-sass sass-loader

Awesome, your package.json file should look something like this:

{
  "dependencies": {
    "@nuxtjs/bulma": "^1.2.6",
    "nuxt": "^2.0.0",
  },
  "devDependencies": {
    "node-sass": "^4.13.1",
    "sass-loader": "^8.0.2",
  }
}

Using Bulma on a Separate File

If you wish to style your app within a custom file/folder, like a normal non-Vue project would be we’d need to complete the following steps:

1. Comment out @nuxtjs/bulma from the modules section in the configuration file.
2. Under assets, create a new folder named stylesheets.
3. Within the stylesheets folder create a new file, name it main.sass.

You may import the Bulma framework and your custom styles.

// assets/stylesheets/main.sass

// Bulma variables
@import "~bulma/sass/utilities/all"
// Bulma framework
@import "~bulma"
// Your custom content goes here

All that is left to do is specify the newly created file as our global CSS file in the configuration file.

// nuxt.config.js

export default {
  css: ['~assets/stylesheets/main.sass']
}

That’s it, now you may add styles as you would normally do.

Using Bulma Within Components

If you plan on styling your app using the <style> tag exclusively you don’t need to do much actually.

Specify the lang prop on the block like so:

<style scoped lang="sass">
</style>

And as for the Bulma variables, you will need to install an additional package called style-resources to import/load the variables globally.

Let’s add it with: yarn add @nuxtjs/style-resources

Specify the file you want to be shared within the module’s options:

// nuxt.config.js

export default {
  styleResources: {
    sass: ['~bulma/sass/utilities/all']
  }
}

And we are done!

The End

Thanks for reading, cya in the next post.