Nuxt Stack is composed of two parts:

Nuxt Stack Module

  • Prepends normalize.css to Nuxt's css array
  • Installs node-sass and sass-loader
  • Integrates @nuxtjs/style-resources
  • Adds a styles alias for css in Nuxt's config
  • Specify common meta data such as name, description and lang in one place and have it automatically cloned to head attributes, meta tags and the PWA manifest
  • Easily add preconnect links for improved resource fetching performance
  • Optimises Nuxt's generate config for Netlify with fallback enabled
  • Configures Nuxt's server host and port to work across the network so you can view your app on another device during development
  • ESLint integration with Webpack for linting and fixing your code automatically during development

The nuxt-stack module also installs and configures the following modules and plugins:

Module Description
@nuxtjs/axios Nuxt axios module for making promise based HTTP requests
@nuxtjs/dotenv Loads .env file and merges the key pairs with Nuxt's env object
@nuxtjs/pwa Collection of modules for developing PWAs
@nuxtjs/sitemap Automatically generate or serve a dynamic sitemap
nuxt-svg-loader Import SVGs as Vue components
webfontloader Load custom webfonts from services like Google and Typekit
vue-analytics Google Analytics integration for Vue and Nuxt
lazysizes Lazily load images and videos only when they become visible
vue-pwa-installer Interface for installing a PWA to the home screen
vue-lazy-hydration Lazily hydrate Vue components using a variety of strategies
vue-tabbing Reactive flag triggered by keyboard navigation using the tab key
vue-static-data Declare static (non-reactive) data within Vue components

Nuxt Stack Commands

  • Generate project templates with nuxt init
    • Pick from two templates: "basic" or "fancy"
    • Only essential files and configuration are generated
    • Options for specifying the source, build and statically generated site folders
    • Score 100/100 in a Google Lighthouse audit from the outset
    • Inject useful development scripts and hooks for husky and lint-staged
    • Generate VSCode settings for resolving Nuxt path aliases and formatting code on save
  • Write and run tests for Jest with zero configuration using nuxt test
    • Import Vue Single File Components (SFCs) into test files
    • Leverage @vue/test-utils suite of utilities for asserting your components
    • Use Jest's snapshot functions to render your Vue SFCs to formatted strings
    • Nuxt path aliases are automatically resolved
    • Only run related tests when committing files to version control
  • Lint your source files using nuxt lint
    • Configures ESLint file extensions to match js,jsx,ts,tsx,vue
  • Format your code with Prettier using nuxt format
    • Optionally format and then lint with nuxt format --lint
  • Delete all generated files and folders with nuxt clean
    • Removes .nuxt, dist and coverage folders
    • Optionally delete node_modules and lock files
  • Serve statically generated sites with nuxt serve
    • Uses serve under the hood but infers the folder to serve from nuxt.config.js
  • Generate a Webpack Bundle Analyser report with nuxt stats