Using Bulma and Font Awsome with NUXT

These days I am crushing on NUXT, tagline: Universal Vue.js Applications. I use it as a static site generator. The documentation for both NUXT and Vue.js is a joy to read making it really easy to get started.

However, some small things tripped me up in the beginning. One of them was adding Bulma and Font Awesome. It turned out to be super simple!

1. npm install bulma font-awesome --save
2. npm install sass-loader node-sass --save-dev
3. Add a css block to your nuxt.config.js:

// File: nuxt.config.js
module.exports = {
 /*
  ** Include css not in components
  */
  css: [
    // node.js module but we specify the pre-processor
    { src: 'bulma/bulma.sass', lang: 'sass' },
    { src: 'font-awesome/scss/font-awesome.scss', lang: 'scss' },
  ],
}

Customize Bulma

Next up was figuring out how to use a customized version of Bulma. Also, easy peasy 😀

1. Create main.scss in the assets folder and add the customize code from Bulma:

// File: assets/main.scss
// 1. Import the initial variables
@import "../sass/utilities/initial-variables"

// 2. Set your own initial variables
// Update blue
$blue: #72d0eb
// Add pink and its invert
$pink: #ffb3b3
$pink-invert: #fff
// Add a serif family
$family-serif: "Merriweather", "Georgia", serif

// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink
$primary-invert: $pink-invert
// Use the existing orange as the danger color
$danger: $orange
// Use the new serif family
$family-primary: $family-serif

// 4. Import the rest of Bulma
@import "../bulma"

2. Update the import statements to work with webpack:

@import "~bulma/sass/utilities/initial-variables"
@import "~bulma/bulma"

3. Update the css block in nuxt.config.js to match the example below:

// File: nuxt.config.js
module.exports = {
 /*
  ** Include css not in components
  */
  css: [
    // node.js module but we specify the pre-processor
    { src: '~assets/main.sass', lang: 'sass' },
    // { src: 'bulma/bulma.sass', lang: 'sass' },
    { src: 'font-awesome/scss/font-awesome.scss', lang: 'scss' },
  ],
}

Please let me know if you found this helpful in the comments below.

4 thoughts on “Using Bulma and Font Awsome with NUXT”

  1. Hey Devan, Thanks. Great article. One question… with respect to #2 what file do we include the imports to update webpack?

Leave a Reply