Introduction


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 the module
yarn add @nuxtjs/html-validator --dev
npm install @nuxtjs/html-validator --save-dev
-
Enable module
nuxt.config.js{ buildModules: ['@nuxtjs/html-validator'] }
nuxt.config.js{ // Install @nuxtjs/html-validator as dependency instead of devDependency 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. -
Add configuration (optional)
@nuxtjs/html-validator
takes two 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. -
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, options: { extends: [ 'html-validate:document', 'html-validate:recommended', 'html-validate:standard' ], rules: { 'svg-focusable': 'off', 'no-unknown-elements': 'error', // Conflicts or not needed when using prettier formatting 'void-style': 'off', 'no-trailing-whitespace': 'off', // Conflict with Nuxt defaults 'require-sri': 'off', 'attribute-boolean-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.