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_copyTerminal
👉 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_copyTerminal
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_copyJS
👉 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_copyTerminal
Then, add the module and module options to your nuxt.config.js
:
{ modules: [ '@nuxtjs/sitemap' ], sitemap: { // options }, }
content_copyJS
👉 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 }
content_copyJS
- Install module
npm install --save-dev @nuxt/components
content_copyTerminal
- Add to
nuxt.config.js
export default { buildModules: [ // TODO: Remove when upgrading to nuxt 2.13+ '@nuxt/components' ] }
content_copyJS
And there you have it!
👉 Read more here: https://github.com/nuxt/components