You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/content/en/index.md
+74-76Lines changed: 74 additions & 76 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -20,105 +20,103 @@ This module configures [`html-validate`](https://html-validate.org/) to automati
20
20
21
21
## Quick start
22
22
23
-
1.**Install the module**
23
+
### Install
24
24
25
-
<code-group>
26
-
<code-block label="Yarn" active>
25
+
<code-group>
26
+
<code-blocklabel="Yarn"active>
27
27
28
-
```bash
29
-
yarn add @nuxtjs/html-validator --dev
30
-
```
28
+
```bash
29
+
yarn add @nuxtjs/html-validator --dev
30
+
```
31
31
32
-
</code-block>
33
-
<code-block label="NPM">
32
+
</code-block>
33
+
<code-blocklabel="NPM">
34
34
35
-
```bash
36
-
npm install @nuxtjs/html-validator --save-dev
37
-
```
35
+
```bash
36
+
npm install @nuxtjs/html-validator --save-dev
37
+
```
38
38
39
-
</code-block>
39
+
</code-block>
40
+
</code-group>
40
41
41
-
</code-group>
42
+
### nuxt.config.js
42
43
43
-
2.**Enable module**
44
+
<code-group>
45
+
<code-blocklabel="Nuxt 2.9+"active>
44
46
45
-
<code-group>
46
-
<code-block label="Nuxt 2.9+" active>
47
+
```js{}[nuxt.config.js]
48
+
{
49
+
buildModules: ['@nuxtjs/html-validator']
50
+
}
51
+
```
47
52
48
-
```js{}[nuxt.config.js]
49
-
{
50
-
buildModules: ['@nuxtjs/html-validator']
51
-
}
52
-
```
53
-
54
-
</code-block>
55
-
<code-block label="Nuxt < 2.9">
53
+
</code-block>
54
+
<code-blocklabel="Nuxt < 2.9">
56
55
57
-
```js{}[nuxt.config.js]
58
-
{
59
-
// Install @nuxtjs/html-validator as dependency instead of devDependency
60
-
modules: ['@nuxtjs/html-validator']
61
-
}
62
-
```
56
+
```js{}[nuxt.config.js]
57
+
{
58
+
// Install @nuxtjs/html-validator as dependency instead of devDependency
59
+
modules: ['@nuxtjs/html-validator']
60
+
}
61
+
```
63
62
64
-
</code-block>
63
+
</code-block>
64
+
</code-group>
65
65
66
-
</code-group>
66
+
<alerttype="info">`html-validator` won't be added to your production bundle - it's just used in development and at build/generate time.</alert>
67
67
68
-
<alerttype="info">`html-validator` won't be added to your production bundle - it's just used in development and at build/generate time.</alert>
68
+
### Configuration (optional)
69
69
70
-
3.**Add configuration** (optional)
70
+
`@nuxtjs/html-validator` takes three options.
71
71
72
-
`@nuxtjs/html-validator` takes three options.
72
+
-`usePrettier` enables prettier printing of your source code to show errors in-context.
73
73
74
-
-`usePrettier` enables prettier printing of your source code to show errors in-context.
74
+
<alert>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.</alert>
75
75
76
-
<alert>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.</alert>
76
+
-`logLevel` sets the verbosity to one of `verbose`, `warning` or `error`. It defaults to `verbose` in dev, and `warning` when generating.
77
77
78
-
-`logLevel` sets the verbosity to one of `verbose`, `warning` or `error`. It defaults to `verbose` in dev, and `warning` when generating.
78
+
<alert>You can use this configuration option to turn off console logging for the `No HTML validation errors found for ...` message.</alert>
79
79
80
-
<alert>You can use this configuration option to turn off console logging for the `No HTML validation errors found for ...` message.</alert>
80
+
-`failOnError` will throw an error after running `nuxt generate` if there are any validation errors with the generated pages.
81
81
82
-
-`failOnError` will throw an error after running `nuxt generate` if there are any validation errors with the generated pages.
82
+
<alert>Useful in continuous integration.</alert>
83
83
84
-
<alert>Useful in continuous integration.</alert>
84
+
-`options` allows you to pass in `html-validate` options that will be merged with the default configuration
85
85
86
-
-`options` allows you to pass in `html-validate`options that will be merged with the default configuration
86
+
<alerttype="info">You can find more about configuring `html-validate`[here](https://html-validate.org/rules/index.html).</alert>
87
87
88
-
<alerttype="info">You can find more about configuring `html-validate`[here](https://html-validate.org/rules/index.html).</alert>
88
+
**Defaults**
89
89
90
-
**Defaults**
91
-
92
-
```js{}[nuxt.config.js]
93
-
{
94
-
htmlValidator: {
95
-
usePrettier: false,
96
-
logLevel: 'verbose',
97
-
failOnError: false,
98
-
options: {
99
-
extends: [
100
-
'html-validate:document',
101
-
'html-validate:recommended',
102
-
'html-validate:standard'
103
-
],
104
-
rules: {
105
-
'svg-focusable': 'off',
106
-
'no-unknown-elements': 'error',
107
-
// Conflicts or not needed as we use prettier formatting
108
-
'void-style': 'off',
109
-
'no-trailing-whitespace': 'off',
110
-
// Conflict with Nuxt defaults
111
-
'require-sri': 'off',
112
-
'attribute-boolean-style': 'off',
113
-
'doctype-style': 'off',
114
-
// Unreasonable rule
115
-
'no-inline-style': 'off'
116
-
}
117
-
}
118
-
}
119
-
}
120
-
```
90
+
```js{}[nuxt.config.js]
91
+
{
92
+
htmlValidator: {
93
+
usePrettier: false,
94
+
logLevel: 'verbose',
95
+
failOnError: false,
96
+
options: {
97
+
extends: [
98
+
'html-validate:document',
99
+
'html-validate:recommended',
100
+
'html-validate:standard'
101
+
],
102
+
rules: {
103
+
'svg-focusable': 'off',
104
+
'no-unknown-elements': 'error',
105
+
// Conflicts or not needed as we use prettier formatting
106
+
'void-style': 'off',
107
+
'no-trailing-whitespace': 'off',
108
+
// Conflict with Nuxt defaults
109
+
'require-sri': 'off',
110
+
'attribute-boolean-style': 'off',
111
+
'doctype-style': 'off',
112
+
// Unreasonable rule
113
+
'no-inline-style': 'off'
114
+
}
115
+
}
116
+
}
117
+
}
118
+
```
121
119
122
-
4.**You're good to go!**
120
+
**You're good to go!**
123
121
124
-
Every time you hard-refresh (server-render) a page in Nuxt, you will see any HTML validation issues printed in your server console.
122
+
Every time you hard-refresh (server-render) a page in Nuxt, you will see any HTML validation issues printed in your server console.
0 commit comments