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

pnpm
 pnpm i -D @nuxtjs/html-validator
Yarn
 yarn add @nuxtjs/html-validator --dev
npm
 npm install @nuxtjs/html-validator --save-dev

nuxt.config.js

Nuxt 3
 defineNuxtConfig({
   modules: ['@nuxtjs/html-validator']
 })
Nuxt 2.9+
 export default {
   buildModules: ['@nuxtjs/html-validator']
 }

 export default {
   // 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.

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 of verbose, warning or error. It defaults to verbose in dev, and warning when generating.
    You can use this configuration option to turn off console logging for the No HTML validation errors found for ... message.
  • failOnError will throw an error after running nuxt generate if there are any validation errors with the generated pages.
    Useful in continuous integration.
  • options allows you to pass in html-validate options that will be merged with the default configuration
    You can find more about configuring html-validatehere.

Defaults

nuxt.config.js
{
  htmlValidator: {
    usePrettier: false,
    logLevel: 'verbose',
    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.

Table of Contents