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:
NUXT_PUBLIC_IGNIS_CORE_ESLINT=falseThe default configuration in Nuxt Ignis' nuxt.config.ts is:
// ...
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:
// @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:
vue/max-attributes-per-linerule is set to allow up to 4 attributes per line and up to 3 attributes per line if more lines are used.vue/html-closing-bracket-newlinerule is set to disallow new line before closing bracket of HTML tags.@stylistic/brace-stylerule is set to enforce "one true brace style" (no new line beforeelse).
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:
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:13Note: 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
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:
- vitest v4 as the fundamental testing framework
- @vitest/browser as the experimental browser runner
- happy-dom as the headless browser runtime
- playwright-core as the headless browser testing framework
- @vue/test-utils for testing Vue stuff
- @nuxt/test-utils for testing Nuxt stuff
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.tsfile created in your project root - example test files created in
/testfolder - shorthand commands for running tests in
package.jsonscripts:testto run the test suite oncetest-uto run the test once and update snapshot files if they changedtest-ito 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:
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:
NUXT_PUBLIC_IGNIS_CORE_SECURITY=falseCLI tools
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 defaultapp.vuefile 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.