Skip to content

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.

To ensure correct functionality, typescript must be included as an explicit dependency.

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

dotenv
NUXT_PUBLIC_IGNIS_CORE_ESLINT=false

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

nuxt.config.ts
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
js
// @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.

Default ESLint config file

Because Nuxt Ignis author is opinionated about some of the default rules, there is also a config override available. To create Nuxt Ignis default instead of plain @nuxt/eslint version, you can use the CLI tool to scaffold the default file into your project.

The file introduces following changes from the default linting behavior:

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

Timestamps for logs are formatted using date-fns library, which is also available in target apps. You can invoke it like this:

your-code.ts
ts
import { format } from 'date-fns'

const formatString = 'yyyy-MM-dd HH:mm:ss'
const formattedDate = format(new Date(), formatString)
// sample output: 2025-08-01 11:12:13

Note: Formatting via date-fns is also exported as an util function ignisDate.

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

Packages:

Nuxt Ignis embraces Vitest as its test runner library. More specifically, it uses proprietary Nuxt Spec package that provides a base layer for testing Nuxt modules and applications united under single dependency. With that you have out-of-the-box access to:

Nuxt Spec is currently an opinionated solution and one of the few features that are fully baked into Nuxt Ignis without an opt-out. I am sorry for that, but hopefully it will provide you enough options to test your apps in a meaningful and convenient way.

If you follow the default installation, you will get following:

  • default vitest.config.ts file created in your project root
  • example test files created in /test folder
  • shorthand commands for running tests in package.json scripts:
    • test to run the test suite once
    • test-u to run the test once and update snapshot files if they changed
    • test-i to run the test suite in interactive mode

Scaffolded vitest.config.ts is utilizing Nuxt Spec's way of merging your custom configuration with the defaults via loadVitestConfig helper function:

ts
import { loadVitestConfig } from 'nuxt-spec/config'

export default loadVitestConfig({
  // your custom config here
})

NOTE: Based on the Vitest documentation, it is possible to pass in any configuration option valid for Vite. Configuration related directly to Vitest must be passed under the test key.

Nuxt Security

Nuxt Ignis includes nuxt-security module by default to help you establish best security practices in your Nuxt application. It provides a set of security headers and other features to protect your app from common vulnerabilities.

The module is imported as-is with default configuration used. Its behavior can be altered by adjusting security option in nuxt.config.ts file in your target app. Refer to the documentation for available options.

You can disable module inclusion by setting the following environment variable:

dotenv
NUXT_PUBLIC_IGNIS_CORE_SECURITY=false

CLI tools

Packages:

Using experimental elrh-cosca library, Nuxt Ignis provides couple of CLI tools to help you set up your project:

  • npx set-app-vue: Copies Nuxt Ignis default app.vue file into target project to allow modifications.
  • npx set-css: Copies Nuxt Ignis default CSS file into target project to allow modifications.
  • npx set-eslint: Creates a new ESLint configuration file with Nuxt Ignis defaults.

The library is also used internally in CLI setup script and for some tests.