Nuxt/Bulma/Sass for beginners…

static . . .

I’ve recently been playing with NuxtJS a lot lately and absolutely love it for generating static websites. If you have some basic knowledge of VueJS and you’re looking to build websites quickly, Nuxt is right for you. Pairing it with a CSS framework takes it one step further and allows us to quickly create beautiful, responsive, deploy-ready static sites. The github repository for this tutorial can be found at https://github.com/mlars84/nuxt-bulma-tutorial.

For a framework buddy I chose Bulma, an easy to use and (more importantly for me) customize framework based on flexbox. You don’t really need to understand flexbox to use it, but it might be a good idea to familiarize yourself with it a little. Once you get this set up, you’ll be spending most of your time digging through the Bulma and Nuxt docs. This little read will get you that far. The tutorial is for mac users (sorry everyone else). I’m assuming you have some basic coding knowledge, can use a command line and have a code editor such as Visual Studio Code (my go-to), Atom or Sublime, but I’ll also explain as I go in an attempt to include everyone :)

First things first, we’ll initiate a starter project with Nuxt’s nifty template. To do this, we need to globally install the VueJS cli. If you don’t have the yarn package manager, you can install that with homebrew:

$ brew install yarn
$ yarn global add @vue/cli

The $ represents your command line/terminal, so don’t type or paste that in. This gives us access to the vue command. Now I would recommend creating a project directory in your root directory to help keep track of and organize all of the amazing static sites you’ll be creating:

$ mkdir projects && cd projects
$ vue init nuxt-community/starter-template <project-name>

Replace the <project-name> bit entirely. I called mine nuxt-bulma. Once you execute the second command you’ll have some questions to answer. If you want to just keep moving along, hit return through the questions (you can always edit the package.json file later). Conversely, you can go ahead and customize your project name, description and author (email is for possible github/lab/etc hosting) if you’d like. Once that’s done:

$ cd nuxt-bulma
$ yarn 
$ yarn run dev

cd (change directory) actually gets you into the project, yarn reads the package.json and installs your dependencies and yarn run dev builds the modules, generates the routes and starts the server. NuxtJS has a lot of behind the scenes magic here, but once it’s all built you can navigate to http://localhost:3000/ in your preferred browser and view their out-of-the-box page:

Alright, now we’re getting closer to the good stuff! If you’ve made it this far, you’ll have no problem getting to the proverbial finish line. Nuxt will automatically generate routes for any .vue file in the pages directory. Right now we’re seeing the index or home page, which is at /. Any page you create after that will be at /<whatever-you-call-it>. So, about.vue would create a page at /about after nuxt is finished building the modules, generating the routes, etc. If you go to pages/index.vue, we can update this to a Hello World:

<template>
    <section class="container">
        <div>
            <h1 class="title">
              Hello World
           </h1>
        </div>
    </section>
</template>

Once Nuxt compiles successfully, you should see Hello World with Nuxt’s CSS styling for .title. Let’s delete the CSS, as we’ll soon be using Bulma. Now you should see a very plain text version of Hello World in the top left of your screen.

To add Bulma in, we first need to install it as a dependency:

$ yarn add bulma

Once the package is finished downloading, your package.json dependencies should show “bulma”: “0.7.1”, or whatever versions you download at the time you’re following this tutorial.

All Nuxt configuration goes through the nuxt.config.js file in your project’s root. Open that up and have a look. We need to let Nuxt know about Bulma in order for them to play nicely. We’re also going to be heading into Sass land to allow for customization. To do this, we need a few more packages (I know, so many packages and dependencies)

Too many packages!

$ yarn add -D nuxt-sass-resources-loader vue-style-loader node-sass sass-loader

The -D flag puts these into our devDependencies. Now, update your nuxt.config.js to look like this:

module.exports = {
/*
** Headers of the page
*/
head: {
  title: 'nuxt-bulma',
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-  scale=1' },
    { hid: 'description', name: 'description', content: 'Nuxt.js project' }
  ],
  link: [
    { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  ]
},
modules: [
  // provide path to the file with resources
  ['nuxt-sass-resources-loader', './assets/main.scss']
],
/*
** Customize the progress bar color
*/
loading: { color: 'rgb(221, 209, 209)' },
/*
** Build configuration
*/
build: {
/*
** Run ESLint on save
*/
extend (config, { isDev, isClient }) {
  if (isDev && isClient) {
    config.module.rules.push({
    enforce: 'pre',
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    exclude: /(node_modules)/
})
      }
    }
  }
}

We are adding the modules array, which connects nuxt-sass-resources-loader to our soon-to-be existent .scss file. So, let’s make it so:

$ touch assets/main.scss

touch will create a new file called main.scss in the assets directory. Open it up and add:

@import "~bulma/sass/utilities/_all.sass";
@import "~bulma/bulma";

The first line imports all of Bulma’s sass variables and the second imports all of Bulma. In between these two lines is where we can do the customization. For now, let’s start using Bulma pre-customized. Go to pages/index.vue and change the <style></style> to this:

<style lang="scss">
.title {
  color: $primary;
}
</style>

The lang=”scss” allows us to use scss syntax here, which Nuxt supports out of the box. If all went to plan, you should now see a cute, nicely padded and turquoise Hello World:

That’s pretty cool. Quite a bit of gobbledygook to get from point A to point B, but we’re here now and this is where the fun starts. If you dig through Bulma’s docs, you can familiarize yourself with their variables and can start changing them or adding your own in your assets/main.scss file in between the two imports, which will then make them globally available throughout your project:

@import "~bulma/sass/utilities/_all.sass";
$primary: red;
$info: orange;
$success: green;
$warning: blue;
$danger: indigo;
$light: lightgrey;
$dark: darkgrey;
@import "~bulma/bulma";

These are silly color choices, but you get the point and to be clear, you can set them to css, hex, hsl, hsla values or other variables that you define. Now, your Hello World should be plain old CSS red:

Change your .title style to

.title {
  color: $info;
}

and you have a CSS orange title.

Alright! Now that you have a template, you are ready to build awesomely responsive static sites with your own custom theme. Feel free to post any questions or comments below and good luck and happy BulmaNuxtSassing!

customize it!