DevEx

For better developer experience, Nuxt Ignis offers following features:

ESlint

Nuxt Ignis utilizes @nuxt/eslint module for convenient ESLint integration in your project. For VS Code, it is recommended to install the ESLint extension for even better integration including "linting on save" configuration.

@nuxt/eslint is a core feature and it is enabled by default. To disable it, you can use following environment variable:

NUXT_PUBLIC_IGNIS_CORE_ESLINT=false

The default configuration in Nuxt Ignis' nuxt.config.ts is:

nuxt.config.ts

// ...
  eslint: {
    config: {
      stylistic: true,
    },
  },
// ...

So the module is also checking for styling issues. Prettier or other solution is NOT used.

Usage notice

@nuxt/eslint module automatically generates ready-to-use eslint.config.mjs file in your project root directory, if not yet present. This file is scaffolded to include recommended Nuxt-related ESLint rules.

The template looks like this:

eslint.config.mjs

// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  // Your custom configs here
)

As it inherits from generated Nuxt content, running pnpm dev for the first time is REQUIRED to make linting work in your projects.

Because Nuxt Ignis author is opinionated about some of the default rules, there is also a config override available. A CLI tool is provided to generate a default ESLint configuration file enhanced with some rule overrides.

To create Nuxt Ignis default instead of plain @nuxt/eslint version, use the following command:

npx make-eslint

Check the file template for more details and explanation.

Logging

Use NUXT_PUBLIC_IGNIS_LOG_LEVEL to set level of log messages captured with consola. The default value is info.

Possible values are: fatal, error, warn, log, info, success, debug, trace, silent, verbose

Error handling

By default, Nuxt Ignis registers global Vue error and warn handler to process errors and warnings in your app. The error/warn object is sent to consola error/warn function. Additional info provided by Vue is also captured in debug mode. Check the implementation.

If you don't want to rely on the default behavior, you can disable those handlers by setting NUXT_PUBLIC_IGNIS_ERROR to false.

Testing

See testing section in contributing guide.