[{"data":1,"prerenderedAt":791},["ShallowReactive",2],{"navigation_docs":3,"landing":4},[],{"id":5,"title":6,"body":7,"description":783,"extension":784,"meta":785,"navigation":787,"path":454,"seo":788,"stem":789,"__hash__":790},"landing\u002Findex.md","Introduction",{"type":8,"value":9,"toc":775},"minimark",[10,771],[11,12,13,34,37,42,55,69,73,78,110,114,270,277,281,286,294,298,324,331,343,346,357,369,375,763,768],"u-container",{},[14,15,16,27],"p",{},[17,18],"img",{"alt":19,"className":20,"src":26},"Light preview",[21,22,23,24,25],"block","dark:hidden","w-full","rounded-xl","shadow","\u002Fpreview.png",[17,28],{"alt":29,"className":30,"src":33},"Dark preview",[31,32,23,24,25],"hidden","dark:block","\u002Fpreview-dark.png",[14,35,36],{},"Validate your SSR\u002FSSG HTML automatically to catch hydration and accessibility issues before they ship.",[38,39,41],"h2",{"id":40},"key-features","Key features",[43,44,45,49,52],"ul",{},[46,47,48],"li",{},"Zero-configuration required",[46,50,51],{},"Helps reduce hydration errors",[46,53,54],{},"Detects common accessibility mistakes",[14,56,57,58,68],{},"This module configures ",[59,60,64],"a",{"href":61,"rel":62},"https:\u002F\u002Fhtml-validate.org\u002F",[63],"nofollow",[65,66,67],"code",{},"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.",[38,70,72],{"id":71},"quick-start","Quick start",[74,75,77],"h3",{"id":76},"install","Install",[79,80,86],"pre",{"className":81,"code":82,"filename":83,"language":84,"meta":85,"style":85},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx nuxi@latest module add html-validator\n","Terminal","bash","",[65,87,88],{"__ignoreMap":85},[89,90,93,97,101,104,107],"span",{"class":91,"line":92},"line",1,[89,94,96],{"class":95},"sBMFI","npx",[89,98,100],{"class":99},"sfazB"," nuxi@latest",[89,102,103],{"class":99}," module",[89,105,106],{"class":99}," add",[89,108,109],{"class":99}," html-validator\n",[74,111,113],{"id":112},"configure-nuxt","Configure Nuxt",[115,116,117,181,225],"tabs",{},[118,119,121],"tabs-item",{"label":120},"Nuxt 3",[79,122,126],{"className":123,"code":124,"language":125,"meta":85,"style":85},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","defineNuxtConfig({\n  modules: [\"@nuxtjs\u002Fhtml-validator\"],\n});\n","js",[65,127,128,142,169],{"__ignoreMap":85},[89,129,130,134,138],{"class":91,"line":92},[89,131,133],{"class":132},"s2Zo4","defineNuxtConfig",[89,135,137],{"class":136},"sTEyZ","(",[89,139,141],{"class":140},"sMK4o","{\n",[89,143,145,149,152,155,158,161,163,166],{"class":91,"line":144},2,[89,146,148],{"class":147},"swJcz","  modules",[89,150,151],{"class":140},":",[89,153,154],{"class":136}," [",[89,156,157],{"class":140},"\"",[89,159,160],{"class":99},"@nuxtjs\u002Fhtml-validator",[89,162,157],{"class":140},[89,164,165],{"class":136},"]",[89,167,168],{"class":140},",\n",[89,170,172,175,178],{"class":91,"line":171},3,[89,173,174],{"class":140},"}",[89,176,177],{"class":136},")",[89,179,180],{"class":140},";\n",[118,182,184],{"label":183},"Nuxt 2.9+",[79,185,187],{"className":123,"code":186,"language":125,"meta":85,"style":85},"export default {\n  buildModules: [\"@nuxtjs\u002Fhtml-validator\"],\n};\n",[65,188,189,201,220],{"__ignoreMap":85},[89,190,191,195,198],{"class":91,"line":92},[89,192,194],{"class":193},"s7zQu","export",[89,196,197],{"class":193}," default",[89,199,200],{"class":140}," {\n",[89,202,203,206,208,210,212,214,216,218],{"class":91,"line":144},[89,204,205],{"class":147},"  buildModules",[89,207,151],{"class":140},[89,209,154],{"class":136},[89,211,157],{"class":140},[89,213,160],{"class":99},[89,215,157],{"class":140},[89,217,165],{"class":136},[89,219,168],{"class":140},[89,221,222],{"class":91,"line":171},[89,223,224],{"class":140},"};\n",[118,226,228],{"label":227},"Nuxt \u003C 2.9",[79,229,231],{"className":123,"code":230,"language":125,"meta":85,"style":85},"export default {\n  \u002F\u002F Install @nuxtjs\u002Fhtml-validator as a dependency instead of devDependency\n  modules: [\"@nuxtjs\u002Fhtml-validator\"],\n};\n",[65,232,233,241,247,265],{"__ignoreMap":85},[89,234,235,237,239],{"class":91,"line":92},[89,236,194],{"class":193},[89,238,197],{"class":193},[89,240,200],{"class":140},[89,242,243],{"class":91,"line":144},[89,244,246],{"class":245},"sHwdD","  \u002F\u002F Install @nuxtjs\u002Fhtml-validator as a dependency instead of devDependency\n",[89,248,249,251,253,255,257,259,261,263],{"class":91,"line":171},[89,250,148],{"class":147},[89,252,151],{"class":140},[89,254,154],{"class":136},[89,256,157],{"class":140},[89,258,160],{"class":99},[89,260,157],{"class":140},[89,262,165],{"class":136},[89,264,168],{"class":140},[89,266,268],{"class":91,"line":267},4,[89,269,224],{"class":140},[271,272,273,276],"note",{},[65,274,275],{},"html-validator"," won't be added to your production bundle — it's only used in development and at build\u002Fgenerate time.",[38,278,280],{"id":279},"configuration","Configuration",[14,282,283,285],{},[65,284,160],{}," exposes four options:",[43,287,288],{},[46,289,290,293],{},[65,291,292],{},"usePrettier"," enables prettier printing of your source code to show errors in-context.",[295,296,297],"tip",{},"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.",[43,299,300],{},[46,301,302,305,306,309,310,313,314,317,318,320,321,323],{},[65,303,304],{},"logLevel"," sets the verbosity to one of ",[65,307,308],{},"verbose",", ",[65,311,312],{},"warning"," or ",[65,315,316],{},"error",". It defaults to ",[65,319,308],{}," in dev, and ",[65,322,312],{}," when generating.",[271,325,326,327,330],{},"Use this option to turn off console logging for the ",[65,328,329],{},"No HTML validation errors found for ..."," message.",[43,332,333],{},[46,334,335,338,339,342],{},[65,336,337],{},"failOnError"," will throw an error after running ",[65,340,341],{},"nuxt generate"," if there are any validation errors with the generated pages.",[295,344,345],{},"Useful in continuous integration.",[43,347,348],{},[46,349,350,353,354,356],{},[65,351,352],{},"options"," allows you to pass in ",[65,355,67],{}," options that will be merged with the default configuration.",[271,358,359,360,362,363,368],{},"You can find more about configuring ",[65,361,67],{}," ",[59,364,367],{"href":365,"rel":366},"https:\u002F\u002Fhtml-validate.org\u002Frules\u002Findex.html",[63],"here",".",[14,370,371],{},[372,373,374],"strong",{},"Defaults",[79,376,379],{"className":123,"code":377,"filename":378,"language":125,"meta":85,"style":85},"{\nhtmlValidator: {\n  usePrettier: false,\n  logLevel: 'verbose',\n  failOnError: false,\n  \u002F** A list of routes to ignore (that is, not check validity for). *\u002F\n  ignore: [\u002F\\\\.(xml|rss|json)$\u002F],\n  options: {\n    extends: [\n      'html-validate:document',\n      'html-validate:recommended',\n      'html-validate:standard'\n    ],\n    rules: {\n      'svg-focusable': 'off',\n      'no-unknown-elements': 'error',\n      \u002F\u002F Conflicts or not needed as we use prettier formatting\n      'void-style': 'off',\n      'no-trailing-whitespace': 'off',\n      \u002F\u002F Conflict with Nuxt defaults\n      'require-sri': 'off',\n      'attribute-boolean-style': 'off',\n      'doctype-style': 'off',\n      \u002F\u002F Unreasonable rule\n      'no-inline-style': 'off'\n    }\n  }\n}\n}\n","nuxt.config.ts",[65,380,381,385,394,407,424,436,442,487,497,508,521,533,544,552,562,584,604,610,630,650,656,676,696,716,722,740,746,752,758],{"__ignoreMap":85},[89,382,383],{"class":91,"line":92},[89,384,141],{"class":140},[89,386,387,390,392],{"class":91,"line":144},[89,388,389],{"class":95},"htmlValidator",[89,391,151],{"class":140},[89,393,200],{"class":140},[89,395,396,399,401,405],{"class":91,"line":171},[89,397,398],{"class":95},"  usePrettier",[89,400,151],{"class":140},[89,402,404],{"class":403},"sfNiH"," false",[89,406,168],{"class":140},[89,408,409,412,414,417,419,422],{"class":91,"line":267},[89,410,411],{"class":95},"  logLevel",[89,413,151],{"class":140},[89,415,416],{"class":140}," '",[89,418,308],{"class":99},[89,420,421],{"class":140},"'",[89,423,168],{"class":140},[89,425,427,430,432,434],{"class":91,"line":426},5,[89,428,429],{"class":95},"  failOnError",[89,431,151],{"class":140},[89,433,404],{"class":403},[89,435,168],{"class":140},[89,437,439],{"class":91,"line":438},6,[89,440,441],{"class":245},"  \u002F** A list of routes to ignore (that is, not check validity for). *\u002F\n",[89,443,445,448,450,452,455,458,460,462,465,468,471,473,476,478,481,483,485],{"class":91,"line":444},7,[89,446,447],{"class":95},"  ignore",[89,449,151],{"class":140},[89,451,154],{"class":147},[89,453,454],{"class":140},"\u002F",[89,456,457],{"class":136},"\\\\",[89,459,368],{"class":99},[89,461,137],{"class":140},[89,463,464],{"class":99},"xml",[89,466,467],{"class":140},"|",[89,469,470],{"class":99},"rss",[89,472,467],{"class":140},[89,474,475],{"class":99},"json",[89,477,177],{"class":140},[89,479,480],{"class":193},"$",[89,482,454],{"class":140},[89,484,165],{"class":147},[89,486,168],{"class":140},[89,488,490,493,495],{"class":91,"line":489},8,[89,491,492],{"class":95},"  options",[89,494,151],{"class":140},[89,496,200],{"class":140},[89,498,500,503,505],{"class":91,"line":499},9,[89,501,502],{"class":95},"    extends",[89,504,151],{"class":140},[89,506,507],{"class":147}," [\n",[89,509,511,514,517,519],{"class":91,"line":510},10,[89,512,513],{"class":140},"      '",[89,515,516],{"class":99},"html-validate:document",[89,518,421],{"class":140},[89,520,168],{"class":140},[89,522,524,526,529,531],{"class":91,"line":523},11,[89,525,513],{"class":140},[89,527,528],{"class":99},"html-validate:recommended",[89,530,421],{"class":140},[89,532,168],{"class":140},[89,534,536,538,541],{"class":91,"line":535},12,[89,537,513],{"class":140},[89,539,540],{"class":99},"html-validate:standard",[89,542,543],{"class":140},"'\n",[89,545,547,550],{"class":91,"line":546},13,[89,548,549],{"class":147},"    ]",[89,551,168],{"class":140},[89,553,555,558,560],{"class":91,"line":554},14,[89,556,557],{"class":95},"    rules",[89,559,151],{"class":140},[89,561,200],{"class":140},[89,563,565,567,570,572,575,577,580,582],{"class":91,"line":564},15,[89,566,513],{"class":140},[89,568,569],{"class":99},"svg-focusable",[89,571,421],{"class":140},[89,573,574],{"class":147},": ",[89,576,421],{"class":140},[89,578,579],{"class":99},"off",[89,581,421],{"class":140},[89,583,168],{"class":140},[89,585,587,589,592,594,596,598,600,602],{"class":91,"line":586},16,[89,588,513],{"class":140},[89,590,591],{"class":99},"no-unknown-elements",[89,593,421],{"class":140},[89,595,574],{"class":147},[89,597,421],{"class":140},[89,599,316],{"class":99},[89,601,421],{"class":140},[89,603,168],{"class":140},[89,605,607],{"class":91,"line":606},17,[89,608,609],{"class":245},"      \u002F\u002F Conflicts or not needed as we use prettier formatting\n",[89,611,613,615,618,620,622,624,626,628],{"class":91,"line":612},18,[89,614,513],{"class":140},[89,616,617],{"class":99},"void-style",[89,619,421],{"class":140},[89,621,574],{"class":147},[89,623,421],{"class":140},[89,625,579],{"class":99},[89,627,421],{"class":140},[89,629,168],{"class":140},[89,631,633,635,638,640,642,644,646,648],{"class":91,"line":632},19,[89,634,513],{"class":140},[89,636,637],{"class":99},"no-trailing-whitespace",[89,639,421],{"class":140},[89,641,574],{"class":147},[89,643,421],{"class":140},[89,645,579],{"class":99},[89,647,421],{"class":140},[89,649,168],{"class":140},[89,651,653],{"class":91,"line":652},20,[89,654,655],{"class":245},"      \u002F\u002F Conflict with Nuxt defaults\n",[89,657,659,661,664,666,668,670,672,674],{"class":91,"line":658},21,[89,660,513],{"class":140},[89,662,663],{"class":99},"require-sri",[89,665,421],{"class":140},[89,667,574],{"class":147},[89,669,421],{"class":140},[89,671,579],{"class":99},[89,673,421],{"class":140},[89,675,168],{"class":140},[89,677,679,681,684,686,688,690,692,694],{"class":91,"line":678},22,[89,680,513],{"class":140},[89,682,683],{"class":99},"attribute-boolean-style",[89,685,421],{"class":140},[89,687,574],{"class":147},[89,689,421],{"class":140},[89,691,579],{"class":99},[89,693,421],{"class":140},[89,695,168],{"class":140},[89,697,699,701,704,706,708,710,712,714],{"class":91,"line":698},23,[89,700,513],{"class":140},[89,702,703],{"class":99},"doctype-style",[89,705,421],{"class":140},[89,707,574],{"class":147},[89,709,421],{"class":140},[89,711,579],{"class":99},[89,713,421],{"class":140},[89,715,168],{"class":140},[89,717,719],{"class":91,"line":718},24,[89,720,721],{"class":245},"      \u002F\u002F Unreasonable rule\n",[89,723,725,727,730,732,734,736,738],{"class":91,"line":724},25,[89,726,513],{"class":140},[89,728,729],{"class":99},"no-inline-style",[89,731,421],{"class":140},[89,733,574],{"class":147},[89,735,421],{"class":140},[89,737,579],{"class":99},[89,739,543],{"class":140},[89,741,743],{"class":91,"line":742},26,[89,744,745],{"class":140},"    }\n",[89,747,749],{"class":91,"line":748},27,[89,750,751],{"class":140},"  }\n",[89,753,755],{"class":91,"line":754},28,[89,756,757],{"class":140},"}\n",[89,759,761],{"class":91,"line":760},29,[89,762,757],{"class":140},[14,764,765],{},[372,766,767],{},"You're good to go!",[14,769,770],{},"Every time you hard-refresh (server-render) a page in Nuxt, you will see any HTML validation issues printed in your server console.",[772,773,774],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":85,"searchDepth":144,"depth":144,"links":776},[777,778,782],{"id":40,"depth":144,"text":41},{"id":71,"depth":144,"text":72,"children":779},[780,781],{"id":76,"depth":171,"text":77},{"id":112,"depth":171,"text":113},{"id":279,"depth":144,"text":280},"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.","md",{"category":786},"Getting started",true,{"title":6,"description":783},"index","3u7tMJ-hzh5AuA3EeEOFb8b0T_g7DhH5CKRcZGDDgik",1775444326678]