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!
- Set option in nuxt.config.js
export default{
components: true
}
- Install module
npm install --save-dev @nuxt/components
- 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