A Nuxt.js Boilerplate

A Nuxt.js Boilerplate

Published: 5/26/20202 min read
vuejs.svg logo

Recently, I'v started working on a few projects with Nuxt.js. As far as Vue.js is concerned, I feel pretty comfortable with it and the development experience is awesome. Actually, I'm hooked on it! And now, after experimenting with Nuxt I found myself installing some modules over and over again. So, I'v decided to create a tiny boilerplate that has the following modules (and also a brand new module!):

👉 SASS support
👉 Global style resources
👉 Site map
👉 NEW! Auto import components
👉 Get the boilerplate here: https://github.com/yossi-abramov/sassy-nuxt-boilerplate

SASS Support

In order to use our <style> tags with lang="scss" run:

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

👉 Read more here: https://nuxtjs.org/faq/pre-processors/

Global Style Resources

If you need global SASS variables and/or mixins etc. run:

npm i -D @nuxtjs/style-resources

Then, update your nuxt.config.js file:

export default {
  buildModules: [
  styleResources: {
   // Import variables and mixins etc. - not actual styles!
   sass: [],
   scss: [],
   less: [],
   stylus: []

👉 Read more here: https://github.com/nuxt-community/style-resources-module


The Nuxt.js sitemap module is very easy to use and setup! Simply run:

npm install @nuxtjs/sitemap

Then, add the module and module options to your nuxt.config.js:

  modules: [
  sitemap: {
    // options

👉 Read more here: https://npmjs.com/package/@nuxtjs/sitemap

Auto Import Components

This is a new Nuxt module. This is absolutely amazing! The module allows you to auto import you components without importing the component file before export default and without registering it! Caution: read the docs carefully and check your Nuxt version!

  1. Set option in nuxt.config.js
export default{
  components: true
  1. Install module
npm install --save-dev @nuxt/components
  1. Add to nuxt.config.js
export default {
  buildModules: [
    // TODO: Remove when upgrading to nuxt 2.13+

And there you have it!
👉 Read more here: https://github.com/nuxt/components