Introduction


Key features
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
```bash
yarn add @nuxtjs/html-validator --dev
```
</code-block>
<code-block label="NPM">
```bash
npm install @nuxtjs/html-validator --save-dev
```
</code-block>
- Enable module
```js{}[nuxt.config.js]
{
buildModules: ['@nuxtjs/html-validator']
}
```
</code-block>
<code-block label="Nuxt < 2.9">
```js{}[nuxt.config.js]
{
// Install @nuxtjs/html-validator as dependency instead of devDependency
modules: ['@nuxtjs/html-validator']
}
```
</code-block>
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 three 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. -
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, failOnError: false, 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.