DEV Community

Cover image for Use Bulma and FontAwesome 5 with Nuxt.js

Use Bulma and FontAwesome 5 with Nuxt.js

Matthew Piercey on September 07, 2019

So, you created a new boilerplate site using Nuxt.js. Now what? Well, maybe you'll want to use a CSS framework to get started with styli...
Read full post
Collapse
 
codeboje profile image
Jens@MindfulDevMag •

Thanks.

I only need the first part, however, to get that working I had to install the sass loader too.

npm install --save-dev node-sass sass-loader

Collapse
 
mtpiercey profile image
Matthew Piercey •

Good point; I guess I've gotten in the habit of adding node-sass, sass-loader, and url-loader/file-loader to my Nuxt projects so much it's second nature.

And core-js@2, up until I started using nuxt-edge...

Collapse
 
dennisk profile image
Dennis Keirsgieter •

Using this method does not generate custom-color classes for me.. like has-background-secondary where secondary is my custom color created in Bulma. Any idea how to fix this?

Collapse
 
mtpiercey profile image
Matthew Piercey •

I do happen to know that using this method you can't assign a Bulma variable to a custom SCSS variable, only a value, so I probably made a mistake somewhere along the line. Thanks for pointing this out, BTW. Perhaps bulma.io/documentation/customize/w... (or at least the last half of it) could help?

Collapse
 
dennisk profile image
Dennis Keirsgieter •

Yeah i now did it by using an extra nuxt module@nuxtjs/style-resources that loads my styles.scss and then if i also load it using the css property in nuxt i get what i want but i do have the feeling its now loading and generating more css then it should since a lot of classes are being there twice. Purgeing my css does not seem to fix that.

Thread Thread
 
mtpiercey profile image
Matthew Piercey •

Are you using github.com/Developmint/nuxt-purgecss? Because that's the only way I got PurgeCSS to work. If I'm not mistaken, you otherwise should be doing it right.

Collapse
 
lewiskori profile image
Lewis kori •

This is really awesome. nuxt is really heaven-sent. Thanks for sharing. Do you have any resources on persisting vuex data on page refresh?

Collapse
 
mtpiercey profile image
Matthew Piercey •

You're in luck - here you go:

// ~/plugins/vuex-persistence.js
// npm install --save vuex-persistedstate or yarn add vuex-persistedstate
import createPersistedState from 'vuex-persistedstate'
/*
  This little plugin is the surprisingly-easy way to make Vuex stuff persist in
  a user's browser's localStorage. Super useful.
*/

export default ({ store, isHMR }) => {
  if (isHMR) { return }

  window.onNuxtReady((nuxt) => {
    createPersistedState()(store)
  })
}

Just import this sucker in nuxt.config.js like so:

plugins: [
'~/plugins/vuex-persistence
]

Collapse
 
lewiskori profile image
Lewis kori •

thank you. This worked like a charm. Looking forward to reading more from you!

Collapse
 
maduhaime profile image
Marc-Antoine Duhaime •

Can we just use font-awesome as CSS with fonts from the packages?

Collapse
 
mtpiercey profile image
Matthew Piercey •

That's totally a legitimate way of doing it; you could even load the CSS from a CDN and import it in nuxt.config.js in the css: option if I'm not mistaken. In fact, it's easier in a lot of ways.

The three main reasons I chose to do it the way I did are:

  • For one reason or another, I like to programmatically load in only the icons I need (even though it isn't easier as such).

  • I've got no scientific proof here, but I'm fairly certain using only the SVG icons you need decreases the bundle size by ~20-30KB

  • I already was using several custom fonts in the project, and I didn't feel like adding another one to the mix.