Key features
- Zero-configuration required
- Helps reduce hydration errors
- Detects common accessibility mistakes
This module configures html-validate
to automatically validate Nuxt server-rendered HTML (SSR and SSG) to detect common issues with HTML that can lead to hydration errors, as well as improve accessibility and best practice.
Quick start
Install
npx nuxi@latest module add html-validator
nuxt.config.js
Nuxt 3
defineNuxtConfig({
modules: ['@nuxtjs/html-validator']
})
html-validator
won't be added to your production bundle - it's just used in development and at build/generate time.Configuration (optional)
@nuxtjs/html-validator
takes four options.
usePrettier
enables prettier printing of your source code to show errors in-context.Consider not enabling this if you are using TailwindCSS, as prettier will struggle to cope with parsing the size of your HTML in development mode.logLevel
sets the verbosity to one ofverbose
,warning
orerror
. It defaults toverbose
in dev, andwarning
when generating.You can use this configuration option to turn off console logging for theNo HTML validation errors found for ...
message.failOnError
will throw an error after runningnuxt generate
if there are any validation errors with the generated pages.Useful in continuous integration.options
allows you to pass inhtml-validate
options that will be merged with the default configurationYou can find more about configuringhtml-validate
here.
Defaults
nuxt.config.js
{
htmlValidator: {
usePrettier: false,
logLevel: 'verbose',
failOnError: false,
/** A list of routes to ignore (that is, not check validity for). */
ignore: [/\.(xml|rss|json)$/],
options: {
extends: [
'html-validate:document',
'html-validate:recommended',
'html-validate:standard'
],
rules: {
'svg-focusable': 'off',
'no-unknown-elements': 'error',
// Conflicts or not needed as we use prettier formatting
'void-style': 'off',
'no-trailing-whitespace': 'off',
// Conflict with Nuxt defaults
'require-sri': 'off',
'attribute-boolean-style': 'off',
'doctype-style': 'off',
// Unreasonable rule
'no-inline-style': 'off'
}
}
}
}
You're good to go!
Every time you hard-refresh (server-render) a page in Nuxt, you will see any HTML validation issues printed in your server console.
Table of Contents