A Nuxt.js Boilerplate

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: [
    '@nuxtjs/style-resources',
  ],
  styleResources: {
   // Import variables and mixins etc. - not actual styles!
   sass: [],
   scss: [],
   less: [],
   stylus: []
  }
}

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

Sitemap

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: [
    '@nuxtjs/sitemap'
  ],
  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
 }  

2. Install module

npm install --save-dev @nuxt/components

3. Add to nuxt.config.js

export default {
  buildModules: [
    // TODO: Remove when upgrading to nuxt 2.13+
    '@nuxt/components'
  ]
}

And there you have it!

👉 Read more here: https://github.com/nuxt/components