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

  1. Install the module

    yarn add @nuxtjs/html-validator --dev
    
    npm install @nuxtjs/html-validator --save-dev
    
  2. 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']
    }
    
  3. Add configuration (optional)

    @nuxtjs/html-validator takes two options.

    • usePrettier enables prettier printing of your source code to show errors in-context.

    • options allows you to pass in html-validate options that will be merged with the default configuration

      You can find more about configuring html-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'
          }
        }
      }
    }
    
  4. 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.