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
content_copy
Terminal

👉 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
content_copy
Terminal

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: []
  }
}
content_copy
JS

👉 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
content_copy
Terminal

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

{
  modules: [
    '@nuxtjs/sitemap'
  ],
  sitemap: {
    // options
  },
}
content_copy
JS

👉 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
}
content_copy
JS

2. Install module

npm install --save-dev @nuxt/components
content_copy
Terminal

3. Add to nuxt.config.js

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

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