Nuxt Stack Options


Specify common meta data used by other modules in one place:


export default {
  modules: ["nuxt-stack"],
  stack: {
    name: "Awesome Sauce",
    shortName: "Sausome"
Key Type Default
lang String "en"
host URL ""
name String "Nuxt Stack"
shortName String
description String "Stacks of goodness for Nuxt"
keywords String[] ["nuxt", "stack"]
themeColor String "#4FC08D"
backgroundColor String "#FFFFFF"

The mapping of these values can be seen below:

stack.lang            » head.htmlAttrs.lang, meta.lang            » meta.ogHost, sitemap.hostname            », manifest.short_name,
stack.description     » manifest.description, meta.description
stack.keywords        » head.meta
stack.themeColor      » manifest.theme_color
stack.backgroundColor » manifest.background_color


It is highly recommended that you specify host, name, description and keywords. Otherwise your project will inherit the default values!

In addition to these mapping options:

Key Type Default Description
preconnect URL[] null Array of URLs to create preconnect links for
normalizeCSS Boolean true Whether or not to include normalize.css


Appended to Nuxt's css options array. This was added for nothing more than semantics. You can choose to use styles in place of css if you would prefer to include SCSS or LESS files using a more general option key name 🤷‍♀


export default {
  modules: ["nuxt-stack"],
  styles: ["styles/a.scss"],
  css: ["styles/b.css"]
// The config above would result in nuxt.options.css:
// ["normalize.css", "styles/b.css", "styles/a.scss"]


By default eslint-loader is integrated with Webpack during development. ESLint will run against your code each time you save it and raise any linting errors in the terminal and browser console. It will also automatically fix linting errors where possible.

To disable eslint-loader simply pass false to the eslint module options:


export default {
  modules: ["nuxt-stack"],
  eslint: false

Configuration options for eslint-loader can be found here

Key Type Default Description
emitWarning Boolean true Emit all linting errors as warnings
cache Boolean true Cache linting results
fix Boolean true Automatically fix errors
formatter Function codeframe Linting error formatter


export default {
  modules: ["nuxt-stack"],
  eslint: {
    fix: false // disable automatic fixing

PWA Module Options

@nuxtjs/pwa is installed by default. To prevent this module from being installed:


export default {
  modules: ["nuxt-stack"],
  pwa: false

Nuxt Stack configures some @nuxtjs/pwa module options using the stack options documented above. For example and stack.description are copied to,, manifest.description and meta.description respectively. Specifying your app name, description, lang etc. in the stack module options follows DRY principles by keeping everything in one place.

If you want different values in your app manifest to those in meta data, you can override the stack options by specifying the values in the respective PWA module options. stack options have the lowest order of precedence so they can be overridden by more specific module options. For example, if you set both and then will be used.

Below is a quick reference table for the module options provided by Nuxt PWA:

Key Type Description
pwa Boolean Set to false to prevent @nuxtjs/pwa from being installed
icon Object See Nuxt PWA icon docs
meta Object See Nuxt PWA meta docs
manifest Object See Nuxt PWA manifest docs
workbox Object See Nuxt PWA workbox docs

Third Party Module Options

As documented on the plugins page, Nuxt Stack includes a suite of popular modules and plugins. Some of these are installed by default while others are only included when module options are specified in the Nuxt config.

Below is a quick reference table of all the third party plugins that are included with Nuxt Stack. To configure or disable any of them, use the key specified.

Key Description
axios Nuxt axios integration for making promise based HTTP requests
dotenv Loads .env and merges the contents with Nuxt's env object
ga Google Analytics integration for Nuxt
hydration Lazily hydrate Vue components using a variety of strategies
installer Simple interface for installing a PWA to the home screen
lazysizes Lazily load images and videos when they become visible
sitemap Automatically generate or serve a dynamic sitemap
styleResources Share variables, mixins and functions across style files and SFCs
staticData Declare static (non-reactive) data within Vue components
svgLoader Import SVGs as Vue components
tabbing Reactive flag triggered by keyboard navigation using the tab key
webfonts Load custom webfonts from services like Google and Typekit

Example Config

A typical nuxt.config.js might look something like this:

export default {
  srcDir: "src",
  modules: ["nuxt-stack"],
  stack: {
    host: "",
    name: "Nuxt Stack",
    description: "Stacks of goodness for Nuxt",
    keywords: ["nuxt", "stack"],
    preconnect: ["", ""]
  ga: {
    id: "UA-123456789-1"
  axios: {
    baseURL: ""
  webfonts: {
    google: {
      families: ["Quicksand:500", "Roboto Mono:400"]
  styles: ["styles/index.scss"],
  styleResources: {
    scss: [