@vue/language-service 2.1.10 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/language-blocks/cs.json +29 -930
- package/data/language-blocks/en.json +28 -929
- package/data/language-blocks/fr.json +28 -929
- package/data/language-blocks/it.json +28 -929
- package/data/language-blocks/ja.json +28 -929
- package/data/language-blocks/ko.json +28 -929
- package/data/language-blocks/pt.json +28 -929
- package/data/language-blocks/ru.json +28 -929
- package/data/language-blocks/zh-cn.json +30 -931
- package/data/language-blocks/zh-hk.json +28 -929
- package/data/locale.json +54 -0
- package/data/model-modifiers/cs.json +6 -165
- package/data/model-modifiers/en.json +6 -165
- package/data/model-modifiers/fr.json +6 -165
- package/data/model-modifiers/it.json +6 -165
- package/data/model-modifiers/ja.json +6 -165
- package/data/model-modifiers/ko.json +6 -165
- package/data/model-modifiers/pt.json +6 -165
- package/data/model-modifiers/ru.json +6 -165
- package/data/model-modifiers/zh-cn.json +6 -165
- package/data/model-modifiers/zh-hk.json +6 -165
- package/data/template/cs.json +59 -1429
- package/data/template/en.json +52 -1422
- package/data/template/fr.json +55 -1425
- package/data/template/it.json +44 -1422
- package/data/template/ja.json +53 -1423
- package/data/template/ko.json +44 -1422
- package/data/template/pt.json +44 -1422
- package/data/template/ru.json +52 -1422
- package/data/template/zh-cn.json +53 -1423
- package/data/template/zh-hk.json +44 -1422
- package/index.d.ts +2 -2
- package/index.js +2 -2
- package/lib/ideFeatures/nameCasing.js +14 -16
- package/lib/plugins/data.js +47 -20
- package/lib/plugins/vue-autoinsert-dotvalue.js +4 -3
- package/lib/plugins/vue-autoinsert-space.js +1 -1
- package/lib/plugins/vue-complete-define-assignment.js +11 -13
- package/lib/plugins/vue-directive-comments.js +10 -8
- package/lib/plugins/vue-document-drop.js +15 -12
- package/lib/plugins/vue-document-links.js +45 -39
- package/lib/plugins/vue-extract-file.js +19 -10
- package/lib/plugins/vue-inlayhints.d.ts +1 -1
- package/lib/plugins/vue-inlayhints.js +65 -56
- package/lib/plugins/vue-sfc.js +29 -27
- package/lib/plugins/vue-template.js +194 -162
- package/lib/plugins/vue-twoslash-queries.js +9 -4
- package/package.json +10 -9
- package/scripts/update-html-data.js +74 -70
|
@@ -8,68 +8,15 @@
|
|
|
8
8
|
"name": "src",
|
|
9
9
|
"description": {
|
|
10
10
|
"kind": "markdown",
|
|
11
|
-
"value": "
|
|
11
|
+
"value": "If you prefer splitting up your `*.vue` components into multiple files, you can use the `src` attribute to import an external file for a language block:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nBeware that `src` imports follow the same path resolution rules as webpack module requests, which means:\n\n- Relative paths need to start with `./`\n- You can import resources from npm dependencies:\n\n```vue\n<!-- import a file from the installed \"todomvc-app-css\" npm package -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` imports also work with custom blocks, e.g.:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning Note\nWhile using aliases in `src`, don't start with `~`, anything after it is interpreted as a module request. This means you can reference assets inside node modules:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
|
|
12
12
|
},
|
|
13
|
-
"references":
|
|
14
|
-
{
|
|
15
|
-
"name": "en",
|
|
16
|
-
"url": "https://vuejs.org/api/sfc-spec.html#src-imports"
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
"name": "zh-cn",
|
|
20
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
"name": "zh-hk",
|
|
24
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#src-imports"
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
"name": "ja",
|
|
28
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
"name": "ua",
|
|
32
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
"name": "fr",
|
|
36
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
"name": "ko",
|
|
40
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
"name": "pt",
|
|
44
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#src-imports"
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
"name": "bn",
|
|
48
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
"name": "it",
|
|
52
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#src-imports"
|
|
53
|
-
},
|
|
54
|
-
{
|
|
55
|
-
"name": "cs",
|
|
56
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#src-imports"
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
"name": "ru",
|
|
60
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#src-imports"
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
"name": "fa",
|
|
64
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#src-imports"
|
|
65
|
-
}
|
|
66
|
-
]
|
|
13
|
+
"references": "api/sfc-spec.html#src-imports"
|
|
67
14
|
},
|
|
68
15
|
{
|
|
69
16
|
"name": "lang",
|
|
70
17
|
"description": {
|
|
71
18
|
"kind": "markdown",
|
|
72
|
-
"value": "
|
|
19
|
+
"value": "Blocks can declare pre-processor languages using the `lang` attribute. The most common case is using TypeScript for the `<script>` block:\n\n```html\n<script lang=\"ts\">\n // use TypeScript\n</script>\n```\n\n`lang` can be applied to any block - for example we can use `<style>` with [Sass](https://sass-lang.com/) and `<template>` with [Pug](https://pugjs.org/api/getting-started.html):\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n $primary-color: #333;\n body {\n color: $primary-color;\n }\n</style>\n```\n\nNote that integration with various pre-processors may differ by toolchain. Check out the respective documentation for examples:\n\n- [Vite](https://vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
|
|
73
20
|
},
|
|
74
21
|
"values": [
|
|
75
22
|
{
|
|
@@ -79,120 +26,14 @@
|
|
|
79
26
|
"name": "pug"
|
|
80
27
|
}
|
|
81
28
|
],
|
|
82
|
-
"references":
|
|
83
|
-
{
|
|
84
|
-
"name": "en",
|
|
85
|
-
"url": "https://vuejs.org/api/sfc-spec.html#pre-processors"
|
|
86
|
-
},
|
|
87
|
-
{
|
|
88
|
-
"name": "zh-cn",
|
|
89
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
90
|
-
},
|
|
91
|
-
{
|
|
92
|
-
"name": "zh-hk",
|
|
93
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
94
|
-
},
|
|
95
|
-
{
|
|
96
|
-
"name": "ja",
|
|
97
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
98
|
-
},
|
|
99
|
-
{
|
|
100
|
-
"name": "ua",
|
|
101
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
102
|
-
},
|
|
103
|
-
{
|
|
104
|
-
"name": "fr",
|
|
105
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
106
|
-
},
|
|
107
|
-
{
|
|
108
|
-
"name": "ko",
|
|
109
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
110
|
-
},
|
|
111
|
-
{
|
|
112
|
-
"name": "pt",
|
|
113
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
114
|
-
},
|
|
115
|
-
{
|
|
116
|
-
"name": "bn",
|
|
117
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
118
|
-
},
|
|
119
|
-
{
|
|
120
|
-
"name": "it",
|
|
121
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
122
|
-
},
|
|
123
|
-
{
|
|
124
|
-
"name": "cs",
|
|
125
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
126
|
-
},
|
|
127
|
-
{
|
|
128
|
-
"name": "ru",
|
|
129
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
130
|
-
},
|
|
131
|
-
{
|
|
132
|
-
"name": "fa",
|
|
133
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
134
|
-
}
|
|
135
|
-
]
|
|
29
|
+
"references": "api/sfc-spec.html#pre-processors"
|
|
136
30
|
}
|
|
137
31
|
],
|
|
138
32
|
"description": {
|
|
139
33
|
"kind": "markdown",
|
|
140
34
|
"value": "\n- Each `*.vue` file can contain at most one top-level `<template>` block.\n\n- Contents will be extracted and passed on to `@vue/compiler-dom`, pre-compiled into JavaScript render functions, and attached to the exported component as its `render` option.\n"
|
|
141
35
|
},
|
|
142
|
-
"references":
|
|
143
|
-
{
|
|
144
|
-
"name": "en",
|
|
145
|
-
"url": "https://vuejs.org/api/sfc-spec.html#template"
|
|
146
|
-
},
|
|
147
|
-
{
|
|
148
|
-
"name": "zh-cn",
|
|
149
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#template"
|
|
150
|
-
},
|
|
151
|
-
{
|
|
152
|
-
"name": "zh-hk",
|
|
153
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#template"
|
|
154
|
-
},
|
|
155
|
-
{
|
|
156
|
-
"name": "ja",
|
|
157
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#template"
|
|
158
|
-
},
|
|
159
|
-
{
|
|
160
|
-
"name": "ua",
|
|
161
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#template"
|
|
162
|
-
},
|
|
163
|
-
{
|
|
164
|
-
"name": "fr",
|
|
165
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#template"
|
|
166
|
-
},
|
|
167
|
-
{
|
|
168
|
-
"name": "ko",
|
|
169
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#template"
|
|
170
|
-
},
|
|
171
|
-
{
|
|
172
|
-
"name": "pt",
|
|
173
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#template"
|
|
174
|
-
},
|
|
175
|
-
{
|
|
176
|
-
"name": "bn",
|
|
177
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#template"
|
|
178
|
-
},
|
|
179
|
-
{
|
|
180
|
-
"name": "it",
|
|
181
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#template"
|
|
182
|
-
},
|
|
183
|
-
{
|
|
184
|
-
"name": "cs",
|
|
185
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#template"
|
|
186
|
-
},
|
|
187
|
-
{
|
|
188
|
-
"name": "ru",
|
|
189
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#template"
|
|
190
|
-
},
|
|
191
|
-
{
|
|
192
|
-
"name": "fa",
|
|
193
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#template"
|
|
194
|
-
}
|
|
195
|
-
]
|
|
36
|
+
"references": "api/sfc-spec.html#template"
|
|
196
37
|
},
|
|
197
38
|
{
|
|
198
39
|
"name": "script",
|
|
@@ -201,68 +42,15 @@
|
|
|
201
42
|
"name": "src",
|
|
202
43
|
"description": {
|
|
203
44
|
"kind": "markdown",
|
|
204
|
-
"value": "
|
|
45
|
+
"value": "If you prefer splitting up your `*.vue` components into multiple files, you can use the `src` attribute to import an external file for a language block:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nBeware that `src` imports follow the same path resolution rules as webpack module requests, which means:\n\n- Relative paths need to start with `./`\n- You can import resources from npm dependencies:\n\n```vue\n<!-- import a file from the installed \"todomvc-app-css\" npm package -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` imports also work with custom blocks, e.g.:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning Note\nWhile using aliases in `src`, don't start with `~`, anything after it is interpreted as a module request. This means you can reference assets inside node modules:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
|
|
205
46
|
},
|
|
206
|
-
"references":
|
|
207
|
-
{
|
|
208
|
-
"name": "en",
|
|
209
|
-
"url": "https://vuejs.org/api/sfc-spec.html#src-imports"
|
|
210
|
-
},
|
|
211
|
-
{
|
|
212
|
-
"name": "zh-cn",
|
|
213
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
214
|
-
},
|
|
215
|
-
{
|
|
216
|
-
"name": "zh-hk",
|
|
217
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#src-imports"
|
|
218
|
-
},
|
|
219
|
-
{
|
|
220
|
-
"name": "ja",
|
|
221
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
|
|
222
|
-
},
|
|
223
|
-
{
|
|
224
|
-
"name": "ua",
|
|
225
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
|
|
226
|
-
},
|
|
227
|
-
{
|
|
228
|
-
"name": "fr",
|
|
229
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
|
|
230
|
-
},
|
|
231
|
-
{
|
|
232
|
-
"name": "ko",
|
|
233
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
|
|
234
|
-
},
|
|
235
|
-
{
|
|
236
|
-
"name": "pt",
|
|
237
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#src-imports"
|
|
238
|
-
},
|
|
239
|
-
{
|
|
240
|
-
"name": "bn",
|
|
241
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
242
|
-
},
|
|
243
|
-
{
|
|
244
|
-
"name": "it",
|
|
245
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#src-imports"
|
|
246
|
-
},
|
|
247
|
-
{
|
|
248
|
-
"name": "cs",
|
|
249
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#src-imports"
|
|
250
|
-
},
|
|
251
|
-
{
|
|
252
|
-
"name": "ru",
|
|
253
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#src-imports"
|
|
254
|
-
},
|
|
255
|
-
{
|
|
256
|
-
"name": "fa",
|
|
257
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#src-imports"
|
|
258
|
-
}
|
|
259
|
-
]
|
|
47
|
+
"references": "api/sfc-spec.html#src-imports"
|
|
260
48
|
},
|
|
261
49
|
{
|
|
262
50
|
"name": "lang",
|
|
263
51
|
"description": {
|
|
264
52
|
"kind": "markdown",
|
|
265
|
-
"value": "
|
|
53
|
+
"value": "Blocks can declare pre-processor languages using the `lang` attribute. The most common case is using TypeScript for the `<script>` block:\n\n```html\n<script lang=\"ts\">\n // use TypeScript\n</script>\n```\n\n`lang` can be applied to any block - for example we can use `<style>` with [Sass](https://sass-lang.com/) and `<template>` with [Pug](https://pugjs.org/api/getting-started.html):\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n $primary-color: #333;\n body {\n color: $primary-color;\n }\n</style>\n```\n\nNote that integration with various pre-processors may differ by toolchain. Check out the respective documentation for examples:\n\n- [Vite](https://vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
|
|
266
54
|
},
|
|
267
55
|
"values": [
|
|
268
56
|
{
|
|
@@ -278,60 +66,7 @@
|
|
|
278
66
|
"name": "jsx"
|
|
279
67
|
}
|
|
280
68
|
],
|
|
281
|
-
"references":
|
|
282
|
-
{
|
|
283
|
-
"name": "en",
|
|
284
|
-
"url": "https://vuejs.org/api/sfc-spec.html#pre-processors"
|
|
285
|
-
},
|
|
286
|
-
{
|
|
287
|
-
"name": "zh-cn",
|
|
288
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
289
|
-
},
|
|
290
|
-
{
|
|
291
|
-
"name": "zh-hk",
|
|
292
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
293
|
-
},
|
|
294
|
-
{
|
|
295
|
-
"name": "ja",
|
|
296
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
297
|
-
},
|
|
298
|
-
{
|
|
299
|
-
"name": "ua",
|
|
300
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
301
|
-
},
|
|
302
|
-
{
|
|
303
|
-
"name": "fr",
|
|
304
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
305
|
-
},
|
|
306
|
-
{
|
|
307
|
-
"name": "ko",
|
|
308
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
309
|
-
},
|
|
310
|
-
{
|
|
311
|
-
"name": "pt",
|
|
312
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
313
|
-
},
|
|
314
|
-
{
|
|
315
|
-
"name": "bn",
|
|
316
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
317
|
-
},
|
|
318
|
-
{
|
|
319
|
-
"name": "it",
|
|
320
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
321
|
-
},
|
|
322
|
-
{
|
|
323
|
-
"name": "cs",
|
|
324
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
325
|
-
},
|
|
326
|
-
{
|
|
327
|
-
"name": "ru",
|
|
328
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
329
|
-
},
|
|
330
|
-
{
|
|
331
|
-
"name": "fa",
|
|
332
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
333
|
-
}
|
|
334
|
-
]
|
|
69
|
+
"references": "api/sfc-spec.html#pre-processors"
|
|
335
70
|
},
|
|
336
71
|
{
|
|
337
72
|
"name": "generic"
|
|
@@ -343,120 +78,14 @@
|
|
|
343
78
|
"kind": "markdown",
|
|
344
79
|
"value": "\n- Each `*.vue` file can contain at most one `<script setup>` block (excluding normal `<script>`).\n\n- The script is pre-processed and used as the component's `setup()` function, which means it will be executed **for each instance of the component**. Top-level bindings in `<script setup>` are automatically exposed to the template. For more details, see [dedicated documentation on `<script setup>`](https://vuejs.org/api/sfc-script-setup.html).\n"
|
|
345
80
|
},
|
|
346
|
-
"references":
|
|
347
|
-
{
|
|
348
|
-
"name": "en",
|
|
349
|
-
"url": "https://vuejs.org/api/sfc-spec.html#script-setup"
|
|
350
|
-
},
|
|
351
|
-
{
|
|
352
|
-
"name": "zh-cn",
|
|
353
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#script-setup"
|
|
354
|
-
},
|
|
355
|
-
{
|
|
356
|
-
"name": "zh-hk",
|
|
357
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#script-setup"
|
|
358
|
-
},
|
|
359
|
-
{
|
|
360
|
-
"name": "ja",
|
|
361
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#script-setup"
|
|
362
|
-
},
|
|
363
|
-
{
|
|
364
|
-
"name": "ua",
|
|
365
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#script-setup"
|
|
366
|
-
},
|
|
367
|
-
{
|
|
368
|
-
"name": "fr",
|
|
369
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#script-setup"
|
|
370
|
-
},
|
|
371
|
-
{
|
|
372
|
-
"name": "ko",
|
|
373
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#script-setup"
|
|
374
|
-
},
|
|
375
|
-
{
|
|
376
|
-
"name": "pt",
|
|
377
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#script-setup"
|
|
378
|
-
},
|
|
379
|
-
{
|
|
380
|
-
"name": "bn",
|
|
381
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#script-setup"
|
|
382
|
-
},
|
|
383
|
-
{
|
|
384
|
-
"name": "it",
|
|
385
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#script-setup"
|
|
386
|
-
},
|
|
387
|
-
{
|
|
388
|
-
"name": "cs",
|
|
389
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#script-setup"
|
|
390
|
-
},
|
|
391
|
-
{
|
|
392
|
-
"name": "ru",
|
|
393
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#script-setup"
|
|
394
|
-
},
|
|
395
|
-
{
|
|
396
|
-
"name": "fa",
|
|
397
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#script-setup"
|
|
398
|
-
}
|
|
399
|
-
]
|
|
81
|
+
"references": "api/sfc-spec.html#script-setup"
|
|
400
82
|
}
|
|
401
83
|
],
|
|
402
84
|
"description": {
|
|
403
85
|
"kind": "markdown",
|
|
404
86
|
"value": "\n- Each `*.vue` file can contain at most one `<script>` block (excluding [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html)).\n\n- The script is executed as an ES Module.\n\n- The **default export** should be a Vue component options object, either as a plain object or as the return value of [defineComponent](https://vuejs.org/api/general.html#definecomponent).\n"
|
|
405
87
|
},
|
|
406
|
-
"references":
|
|
407
|
-
{
|
|
408
|
-
"name": "en",
|
|
409
|
-
"url": "https://vuejs.org/api/sfc-spec.html#script"
|
|
410
|
-
},
|
|
411
|
-
{
|
|
412
|
-
"name": "zh-cn",
|
|
413
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#script"
|
|
414
|
-
},
|
|
415
|
-
{
|
|
416
|
-
"name": "zh-hk",
|
|
417
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#script"
|
|
418
|
-
},
|
|
419
|
-
{
|
|
420
|
-
"name": "ja",
|
|
421
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#script"
|
|
422
|
-
},
|
|
423
|
-
{
|
|
424
|
-
"name": "ua",
|
|
425
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#script"
|
|
426
|
-
},
|
|
427
|
-
{
|
|
428
|
-
"name": "fr",
|
|
429
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#script"
|
|
430
|
-
},
|
|
431
|
-
{
|
|
432
|
-
"name": "ko",
|
|
433
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#script"
|
|
434
|
-
},
|
|
435
|
-
{
|
|
436
|
-
"name": "pt",
|
|
437
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#script"
|
|
438
|
-
},
|
|
439
|
-
{
|
|
440
|
-
"name": "bn",
|
|
441
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#script"
|
|
442
|
-
},
|
|
443
|
-
{
|
|
444
|
-
"name": "it",
|
|
445
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#script"
|
|
446
|
-
},
|
|
447
|
-
{
|
|
448
|
-
"name": "cs",
|
|
449
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#script"
|
|
450
|
-
},
|
|
451
|
-
{
|
|
452
|
-
"name": "ru",
|
|
453
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#script"
|
|
454
|
-
},
|
|
455
|
-
{
|
|
456
|
-
"name": "fa",
|
|
457
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#script"
|
|
458
|
-
}
|
|
459
|
-
]
|
|
88
|
+
"references": "api/sfc-spec.html#script"
|
|
460
89
|
},
|
|
461
90
|
{
|
|
462
91
|
"name": "script setup",
|
|
@@ -465,60 +94,7 @@
|
|
|
465
94
|
"kind": "markdown",
|
|
466
95
|
"value": "\n- Each `*.vue` file can contain at most one `<script setup>` block (excluding normal `<script>`).\n\n- The script is pre-processed and used as the component's `setup()` function, which means it will be executed **for each instance of the component**. Top-level bindings in `<script setup>` are automatically exposed to the template. For more details, see [dedicated documentation on `<script setup>`](https://vuejs.org/api/sfc-script-setup.html).\n"
|
|
467
96
|
},
|
|
468
|
-
"references":
|
|
469
|
-
{
|
|
470
|
-
"name": "en",
|
|
471
|
-
"url": "https://vuejs.org/api/sfc-spec.html#script-setup"
|
|
472
|
-
},
|
|
473
|
-
{
|
|
474
|
-
"name": "zh-cn",
|
|
475
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#script-setup"
|
|
476
|
-
},
|
|
477
|
-
{
|
|
478
|
-
"name": "zh-hk",
|
|
479
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#script-setup"
|
|
480
|
-
},
|
|
481
|
-
{
|
|
482
|
-
"name": "ja",
|
|
483
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#script-setup"
|
|
484
|
-
},
|
|
485
|
-
{
|
|
486
|
-
"name": "ua",
|
|
487
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#script-setup"
|
|
488
|
-
},
|
|
489
|
-
{
|
|
490
|
-
"name": "fr",
|
|
491
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#script-setup"
|
|
492
|
-
},
|
|
493
|
-
{
|
|
494
|
-
"name": "ko",
|
|
495
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#script-setup"
|
|
496
|
-
},
|
|
497
|
-
{
|
|
498
|
-
"name": "pt",
|
|
499
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#script-setup"
|
|
500
|
-
},
|
|
501
|
-
{
|
|
502
|
-
"name": "bn",
|
|
503
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#script-setup"
|
|
504
|
-
},
|
|
505
|
-
{
|
|
506
|
-
"name": "it",
|
|
507
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#script-setup"
|
|
508
|
-
},
|
|
509
|
-
{
|
|
510
|
-
"name": "cs",
|
|
511
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#script-setup"
|
|
512
|
-
},
|
|
513
|
-
{
|
|
514
|
-
"name": "ru",
|
|
515
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#script-setup"
|
|
516
|
-
},
|
|
517
|
-
{
|
|
518
|
-
"name": "fa",
|
|
519
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#script-setup"
|
|
520
|
-
}
|
|
521
|
-
]
|
|
97
|
+
"references": "api/sfc-spec.html#script-setup"
|
|
522
98
|
},
|
|
523
99
|
{
|
|
524
100
|
"name": "style",
|
|
@@ -527,68 +103,15 @@
|
|
|
527
103
|
"name": "src",
|
|
528
104
|
"description": {
|
|
529
105
|
"kind": "markdown",
|
|
530
|
-
"value": "
|
|
106
|
+
"value": "If you prefer splitting up your `*.vue` components into multiple files, you can use the `src` attribute to import an external file for a language block:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nBeware that `src` imports follow the same path resolution rules as webpack module requests, which means:\n\n- Relative paths need to start with `./`\n- You can import resources from npm dependencies:\n\n```vue\n<!-- import a file from the installed \"todomvc-app-css\" npm package -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` imports also work with custom blocks, e.g.:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning Note\nWhile using aliases in `src`, don't start with `~`, anything after it is interpreted as a module request. This means you can reference assets inside node modules:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
|
|
531
107
|
},
|
|
532
|
-
"references":
|
|
533
|
-
{
|
|
534
|
-
"name": "en",
|
|
535
|
-
"url": "https://vuejs.org/api/sfc-spec.html#src-imports"
|
|
536
|
-
},
|
|
537
|
-
{
|
|
538
|
-
"name": "zh-cn",
|
|
539
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
540
|
-
},
|
|
541
|
-
{
|
|
542
|
-
"name": "zh-hk",
|
|
543
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#src-imports"
|
|
544
|
-
},
|
|
545
|
-
{
|
|
546
|
-
"name": "ja",
|
|
547
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
|
|
548
|
-
},
|
|
549
|
-
{
|
|
550
|
-
"name": "ua",
|
|
551
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
|
|
552
|
-
},
|
|
553
|
-
{
|
|
554
|
-
"name": "fr",
|
|
555
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
|
|
556
|
-
},
|
|
557
|
-
{
|
|
558
|
-
"name": "ko",
|
|
559
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
|
|
560
|
-
},
|
|
561
|
-
{
|
|
562
|
-
"name": "pt",
|
|
563
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#src-imports"
|
|
564
|
-
},
|
|
565
|
-
{
|
|
566
|
-
"name": "bn",
|
|
567
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
568
|
-
},
|
|
569
|
-
{
|
|
570
|
-
"name": "it",
|
|
571
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#src-imports"
|
|
572
|
-
},
|
|
573
|
-
{
|
|
574
|
-
"name": "cs",
|
|
575
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#src-imports"
|
|
576
|
-
},
|
|
577
|
-
{
|
|
578
|
-
"name": "ru",
|
|
579
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#src-imports"
|
|
580
|
-
},
|
|
581
|
-
{
|
|
582
|
-
"name": "fa",
|
|
583
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#src-imports"
|
|
584
|
-
}
|
|
585
|
-
]
|
|
108
|
+
"references": "api/sfc-spec.html#src-imports"
|
|
586
109
|
},
|
|
587
110
|
{
|
|
588
111
|
"name": "lang",
|
|
589
112
|
"description": {
|
|
590
113
|
"kind": "markdown",
|
|
591
|
-
"value": "
|
|
114
|
+
"value": "Blocks can declare pre-processor languages using the `lang` attribute. The most common case is using TypeScript for the `<script>` block:\n\n```html\n<script lang=\"ts\">\n // use TypeScript\n</script>\n```\n\n`lang` can be applied to any block - for example we can use `<style>` with [Sass](https://sass-lang.com/) and `<template>` with [Pug](https://pugjs.org/api/getting-started.html):\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n $primary-color: #333;\n body {\n color: $primary-color;\n }\n</style>\n```\n\nNote that integration with various pre-processors may differ by toolchain. Check out the respective documentation for examples:\n\n- [Vite](https://vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
|
|
592
115
|
},
|
|
593
116
|
"values": [
|
|
594
117
|
{
|
|
@@ -610,244 +133,32 @@
|
|
|
610
133
|
"name": "sass"
|
|
611
134
|
}
|
|
612
135
|
],
|
|
613
|
-
"references":
|
|
614
|
-
{
|
|
615
|
-
"name": "en",
|
|
616
|
-
"url": "https://vuejs.org/api/sfc-spec.html#pre-processors"
|
|
617
|
-
},
|
|
618
|
-
{
|
|
619
|
-
"name": "zh-cn",
|
|
620
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
621
|
-
},
|
|
622
|
-
{
|
|
623
|
-
"name": "zh-hk",
|
|
624
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
625
|
-
},
|
|
626
|
-
{
|
|
627
|
-
"name": "ja",
|
|
628
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
629
|
-
},
|
|
630
|
-
{
|
|
631
|
-
"name": "ua",
|
|
632
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
633
|
-
},
|
|
634
|
-
{
|
|
635
|
-
"name": "fr",
|
|
636
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
637
|
-
},
|
|
638
|
-
{
|
|
639
|
-
"name": "ko",
|
|
640
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
641
|
-
},
|
|
642
|
-
{
|
|
643
|
-
"name": "pt",
|
|
644
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
645
|
-
},
|
|
646
|
-
{
|
|
647
|
-
"name": "bn",
|
|
648
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
649
|
-
},
|
|
650
|
-
{
|
|
651
|
-
"name": "it",
|
|
652
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
653
|
-
},
|
|
654
|
-
{
|
|
655
|
-
"name": "cs",
|
|
656
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
657
|
-
},
|
|
658
|
-
{
|
|
659
|
-
"name": "ru",
|
|
660
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
661
|
-
},
|
|
662
|
-
{
|
|
663
|
-
"name": "fa",
|
|
664
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
665
|
-
}
|
|
666
|
-
]
|
|
136
|
+
"references": "api/sfc-spec.html#pre-processors"
|
|
667
137
|
},
|
|
668
138
|
{
|
|
669
139
|
"name": "scoped",
|
|
670
140
|
"valueSet": "v",
|
|
671
141
|
"description": {
|
|
672
142
|
"kind": "markdown",
|
|
673
|
-
"value": "
|
|
143
|
+
"value": "When a `<style>` tag has the `scoped` attribute, its CSS will apply to elements of the current component only. This is similar to the style encapsulation found in Shadow DOM. It comes with some caveats, but doesn't require any polyfills. It is achieved by using PostCSS to transform the following:\n\n```vue\n<style scoped>\n.example {\n color: red;\n}\n</style>\n\n<template>\n <div class=\"example\">hi</div>\n</template>\n```\n\nInto the following:\n\n```vue\n<style>\n.example[data-v-f3f3eg9] {\n color: red;\n}\n</style>\n\n<template>\n <div class=\"example\" data-v-f3f3eg9>hi</div>\n</template>\n```\n\n### Child Component Root Elements \n\nWith `scoped`, the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the parent can style the child root element for layout purposes.\n\n### Deep Selectors \n\nIf you want a selector in `scoped` styles to be \"deep\", i.e. affecting child components, you can use the `:deep()` pseudo-class:\n\n```vue\n<style scoped>\n.a :deep(.b) {\n /* ... */\n}\n</style>\n```\n\nThe above will be compiled into:\n\n```css\n.a[data-v-f3f3eg9] .b {\n /* ... */\n}\n```\n\n:::tip\nDOM content created with `v-html` are not affected by scoped styles, but you can still style them using deep selectors.\n:::\n\n### Slotted Selectors \n\nBy default, scoped styles do not affect contents rendered by `<slot/>`, as they are considered to be owned by the parent component passing them in. To explicitly target slot content, use the `:slotted` pseudo-class:\n\n```vue\n<style scoped>\n:slotted(div) {\n color: red;\n}\n</style>\n```\n\n### Global Selectors \n\nIf you want just one rule to apply globally, you can use the `:global` pseudo-class rather than creating another `<style>` (see below):\n\n```vue\n<style scoped>\n:global(.red) {\n color: red;\n}\n</style>\n```\n\n### Mixing Local and Global Styles \n\nYou can also include both scoped and non-scoped styles in the same component:\n\n```vue\n<style>\n/* global styles */\n</style>\n\n<style scoped>\n/* local styles */\n</style>\n```\n\n### Scoped Style Tips \n\n- **Scoped styles do not eliminate the need for classes**. Due to the way browsers render various CSS selectors, `p { color: red }` will be many times slower when scoped (i.e. when combined with an attribute selector). If you use classes or ids instead, such as in `.example { color: red }`, then you virtually eliminate that performance hit.\n\n- **Be careful with descendant selectors in recursive components!** For a CSS rule with the selector `.a .b`, if the element that matches `.a` contains a recursive child component, then all `.b` in that child component will be matched by the rule."
|
|
674
144
|
},
|
|
675
|
-
"references":
|
|
676
|
-
{
|
|
677
|
-
"name": "en",
|
|
678
|
-
"url": "https://vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
679
|
-
},
|
|
680
|
-
{
|
|
681
|
-
"name": "zh-cn",
|
|
682
|
-
"url": "https://cn.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
683
|
-
},
|
|
684
|
-
{
|
|
685
|
-
"name": "zh-hk",
|
|
686
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
687
|
-
},
|
|
688
|
-
{
|
|
689
|
-
"name": "ja",
|
|
690
|
-
"url": "https://ja.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
691
|
-
},
|
|
692
|
-
{
|
|
693
|
-
"name": "ua",
|
|
694
|
-
"url": "https://ua.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
695
|
-
},
|
|
696
|
-
{
|
|
697
|
-
"name": "fr",
|
|
698
|
-
"url": "https://fr.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
699
|
-
},
|
|
700
|
-
{
|
|
701
|
-
"name": "ko",
|
|
702
|
-
"url": "https://ko.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
703
|
-
},
|
|
704
|
-
{
|
|
705
|
-
"name": "pt",
|
|
706
|
-
"url": "https://pt.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
707
|
-
},
|
|
708
|
-
{
|
|
709
|
-
"name": "bn",
|
|
710
|
-
"url": "https://bn.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
711
|
-
},
|
|
712
|
-
{
|
|
713
|
-
"name": "it",
|
|
714
|
-
"url": "https://it.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
715
|
-
},
|
|
716
|
-
{
|
|
717
|
-
"name": "cs",
|
|
718
|
-
"url": "https://cs.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
719
|
-
},
|
|
720
|
-
{
|
|
721
|
-
"name": "ru",
|
|
722
|
-
"url": "https://ru.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
723
|
-
},
|
|
724
|
-
{
|
|
725
|
-
"name": "fa",
|
|
726
|
-
"url": "https://fa.vuejs.org/api/sfc-css-features.html#scoped-css"
|
|
727
|
-
}
|
|
728
|
-
]
|
|
145
|
+
"references": "api/sfc-css-features.html#scoped-css"
|
|
729
146
|
},
|
|
730
147
|
{
|
|
731
148
|
"name": "module",
|
|
732
149
|
"valueSet": "v",
|
|
733
150
|
"description": {
|
|
734
151
|
"kind": "markdown",
|
|
735
|
-
"value": "
|
|
152
|
+
"value": "A `<style module>` tag is compiled as [CSS Modules](https://github.com/css-modules/css-modules) and exposes the resulting CSS classes to the component as an object under the key of `$style`:\n\n```vue\n<template>\n <p :class=\"$style.red\">This should be red</p>\n</template>\n\n<style module>\n.red {\n color: red;\n}\n</style>\n```\n\nThe resulting classes are hashed to avoid collision, achieving the same effect of scoping the CSS to the current component only.\n\nRefer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for more details such as [global exceptions](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#exceptions) and [composition](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#composition).\n\n### Custom Inject Name \n\nYou can customize the property key of the injected classes object by giving the `module` attribute a value:\n\n```vue\n<template>\n <p :class=\"classes.red\">red</p>\n</template>\n\n<style module=\"classes\">\n.red {\n color: red;\n}\n</style>\n```\n\n### Usage with Composition API \n\nThe injected classes can be accessed in `setup()` and `<script setup>` via the `useCssModule` API. For `<style module>` blocks with custom injection names, `useCssModule` accepts the matching `module` attribute value as the first argument:\n\n```js\nimport { useCssModule } from 'vue'\n\n// inside setup() scope...\n// default, returns classes for <style module>\nuseCssModule()\n\n// named, returns classes for <style module=\"classes\">\nuseCssModule('classes')\n```\n\n- **Example**\n\n```vue\n<script setup lang=\"ts\">\nimport { useCssModule } from 'vue'\n\nconst classes = useCssModule()\n</script>\n\n<template>\n <p :class=\"classes.red\">red</p>\n</template>\n\n<style module>\n.red {\n color: red;\n}\n</style>\n```"
|
|
736
153
|
},
|
|
737
|
-
"references":
|
|
738
|
-
{
|
|
739
|
-
"name": "en",
|
|
740
|
-
"url": "https://vuejs.org/api/sfc-css-features.html#css-modules"
|
|
741
|
-
},
|
|
742
|
-
{
|
|
743
|
-
"name": "zh-cn",
|
|
744
|
-
"url": "https://cn.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
745
|
-
},
|
|
746
|
-
{
|
|
747
|
-
"name": "zh-hk",
|
|
748
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
749
|
-
},
|
|
750
|
-
{
|
|
751
|
-
"name": "ja",
|
|
752
|
-
"url": "https://ja.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
753
|
-
},
|
|
754
|
-
{
|
|
755
|
-
"name": "ua",
|
|
756
|
-
"url": "https://ua.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
757
|
-
},
|
|
758
|
-
{
|
|
759
|
-
"name": "fr",
|
|
760
|
-
"url": "https://fr.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
761
|
-
},
|
|
762
|
-
{
|
|
763
|
-
"name": "ko",
|
|
764
|
-
"url": "https://ko.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
765
|
-
},
|
|
766
|
-
{
|
|
767
|
-
"name": "pt",
|
|
768
|
-
"url": "https://pt.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
769
|
-
},
|
|
770
|
-
{
|
|
771
|
-
"name": "bn",
|
|
772
|
-
"url": "https://bn.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
773
|
-
},
|
|
774
|
-
{
|
|
775
|
-
"name": "it",
|
|
776
|
-
"url": "https://it.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
777
|
-
},
|
|
778
|
-
{
|
|
779
|
-
"name": "cs",
|
|
780
|
-
"url": "https://cs.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
781
|
-
},
|
|
782
|
-
{
|
|
783
|
-
"name": "ru",
|
|
784
|
-
"url": "https://ru.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
785
|
-
},
|
|
786
|
-
{
|
|
787
|
-
"name": "fa",
|
|
788
|
-
"url": "https://fa.vuejs.org/api/sfc-css-features.html#css-modules"
|
|
789
|
-
}
|
|
790
|
-
]
|
|
154
|
+
"references": "api/sfc-css-features.html#css-modules"
|
|
791
155
|
}
|
|
792
156
|
],
|
|
793
157
|
"description": {
|
|
794
158
|
"kind": "markdown",
|
|
795
159
|
"value": "\n- A single `*.vue` file can contain multiple `<style>` tags.\n\n- A `<style>` tag can have `scoped` or `module` attributes (see [SFC Style Features](https://vuejs.org/api/sfc-css-features.html) for more details) to help encapsulate the styles to the current component. Multiple `<style>` tags with different encapsulation modes can be mixed in the same component.\n"
|
|
796
160
|
},
|
|
797
|
-
"references":
|
|
798
|
-
{
|
|
799
|
-
"name": "en",
|
|
800
|
-
"url": "https://vuejs.org/api/sfc-spec.html#style"
|
|
801
|
-
},
|
|
802
|
-
{
|
|
803
|
-
"name": "zh-cn",
|
|
804
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#style"
|
|
805
|
-
},
|
|
806
|
-
{
|
|
807
|
-
"name": "zh-hk",
|
|
808
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#style"
|
|
809
|
-
},
|
|
810
|
-
{
|
|
811
|
-
"name": "ja",
|
|
812
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#style"
|
|
813
|
-
},
|
|
814
|
-
{
|
|
815
|
-
"name": "ua",
|
|
816
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#style"
|
|
817
|
-
},
|
|
818
|
-
{
|
|
819
|
-
"name": "fr",
|
|
820
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#style"
|
|
821
|
-
},
|
|
822
|
-
{
|
|
823
|
-
"name": "ko",
|
|
824
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#style"
|
|
825
|
-
},
|
|
826
|
-
{
|
|
827
|
-
"name": "pt",
|
|
828
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#style"
|
|
829
|
-
},
|
|
830
|
-
{
|
|
831
|
-
"name": "bn",
|
|
832
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#style"
|
|
833
|
-
},
|
|
834
|
-
{
|
|
835
|
-
"name": "it",
|
|
836
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#style"
|
|
837
|
-
},
|
|
838
|
-
{
|
|
839
|
-
"name": "cs",
|
|
840
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#style"
|
|
841
|
-
},
|
|
842
|
-
{
|
|
843
|
-
"name": "ru",
|
|
844
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#style"
|
|
845
|
-
},
|
|
846
|
-
{
|
|
847
|
-
"name": "fa",
|
|
848
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#style"
|
|
849
|
-
}
|
|
850
|
-
]
|
|
161
|
+
"references": "api/sfc-spec.html#style"
|
|
851
162
|
},
|
|
852
163
|
{
|
|
853
164
|
"name": "Custom Blocks",
|
|
@@ -856,122 +167,16 @@
|
|
|
856
167
|
"name": "src",
|
|
857
168
|
"description": {
|
|
858
169
|
"kind": "markdown",
|
|
859
|
-
"value": "
|
|
170
|
+
"value": "If you prefer splitting up your `*.vue` components into multiple files, you can use the `src` attribute to import an external file for a language block:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nBeware that `src` imports follow the same path resolution rules as webpack module requests, which means:\n\n- Relative paths need to start with `./`\n- You can import resources from npm dependencies:\n\n```vue\n<!-- import a file from the installed \"todomvc-app-css\" npm package -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` imports also work with custom blocks, e.g.:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning Note\nWhile using aliases in `src`, don't start with `~`, anything after it is interpreted as a module request. This means you can reference assets inside node modules:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
|
|
860
171
|
},
|
|
861
|
-
"references":
|
|
862
|
-
{
|
|
863
|
-
"name": "en",
|
|
864
|
-
"url": "https://vuejs.org/api/sfc-spec.html#src-imports"
|
|
865
|
-
},
|
|
866
|
-
{
|
|
867
|
-
"name": "zh-cn",
|
|
868
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
869
|
-
},
|
|
870
|
-
{
|
|
871
|
-
"name": "zh-hk",
|
|
872
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#src-imports"
|
|
873
|
-
},
|
|
874
|
-
{
|
|
875
|
-
"name": "ja",
|
|
876
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
|
|
877
|
-
},
|
|
878
|
-
{
|
|
879
|
-
"name": "ua",
|
|
880
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
|
|
881
|
-
},
|
|
882
|
-
{
|
|
883
|
-
"name": "fr",
|
|
884
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
|
|
885
|
-
},
|
|
886
|
-
{
|
|
887
|
-
"name": "ko",
|
|
888
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
|
|
889
|
-
},
|
|
890
|
-
{
|
|
891
|
-
"name": "pt",
|
|
892
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#src-imports"
|
|
893
|
-
},
|
|
894
|
-
{
|
|
895
|
-
"name": "bn",
|
|
896
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
897
|
-
},
|
|
898
|
-
{
|
|
899
|
-
"name": "it",
|
|
900
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#src-imports"
|
|
901
|
-
},
|
|
902
|
-
{
|
|
903
|
-
"name": "cs",
|
|
904
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#src-imports"
|
|
905
|
-
},
|
|
906
|
-
{
|
|
907
|
-
"name": "ru",
|
|
908
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#src-imports"
|
|
909
|
-
},
|
|
910
|
-
{
|
|
911
|
-
"name": "fa",
|
|
912
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#src-imports"
|
|
913
|
-
}
|
|
914
|
-
]
|
|
172
|
+
"references": "api/sfc-spec.html#src-imports"
|
|
915
173
|
}
|
|
916
174
|
],
|
|
917
175
|
"description": {
|
|
918
176
|
"kind": "markdown",
|
|
919
177
|
"value": "\nAdditional custom blocks can be included in a `*.vue` file for any project-specific needs, for example a `<docs>` block. Some real-world examples of custom blocks include:\n\n- [Gridsome: `<page-query>`](https://gridsome.org/docs/querying-data/)\n- [vite-plugin-vue-gql: `<gql>`](https://github.com/wheatjs/vite-plugin-vue-gql)\n- [vue-i18n: `<i18n>`](https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#i18n-custom-block)\n\nHandling of Custom Blocks will depend on tooling - if you want to build your own custom block integrations, see the [SFC custom block integrations tooling section](https://vuejs.org/guide/scaling-up/tooling.html#sfc-custom-block-integrations) for more details.\n"
|
|
920
178
|
},
|
|
921
|
-
"references":
|
|
922
|
-
{
|
|
923
|
-
"name": "en",
|
|
924
|
-
"url": "https://vuejs.org/api/sfc-spec.html#custom-blocks"
|
|
925
|
-
},
|
|
926
|
-
{
|
|
927
|
-
"name": "zh-cn",
|
|
928
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#custom-blocks"
|
|
929
|
-
},
|
|
930
|
-
{
|
|
931
|
-
"name": "zh-hk",
|
|
932
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#custom-blocks"
|
|
933
|
-
},
|
|
934
|
-
{
|
|
935
|
-
"name": "ja",
|
|
936
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#custom-blocks"
|
|
937
|
-
},
|
|
938
|
-
{
|
|
939
|
-
"name": "ua",
|
|
940
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#custom-blocks"
|
|
941
|
-
},
|
|
942
|
-
{
|
|
943
|
-
"name": "fr",
|
|
944
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#custom-blocks"
|
|
945
|
-
},
|
|
946
|
-
{
|
|
947
|
-
"name": "ko",
|
|
948
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#custom-blocks"
|
|
949
|
-
},
|
|
950
|
-
{
|
|
951
|
-
"name": "pt",
|
|
952
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#custom-blocks"
|
|
953
|
-
},
|
|
954
|
-
{
|
|
955
|
-
"name": "bn",
|
|
956
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#custom-blocks"
|
|
957
|
-
},
|
|
958
|
-
{
|
|
959
|
-
"name": "it",
|
|
960
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#custom-blocks"
|
|
961
|
-
},
|
|
962
|
-
{
|
|
963
|
-
"name": "cs",
|
|
964
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#custom-blocks"
|
|
965
|
-
},
|
|
966
|
-
{
|
|
967
|
-
"name": "ru",
|
|
968
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#custom-blocks"
|
|
969
|
-
},
|
|
970
|
-
{
|
|
971
|
-
"name": "fa",
|
|
972
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#custom-blocks"
|
|
973
|
-
}
|
|
974
|
-
]
|
|
179
|
+
"references": "api/sfc-spec.html#custom-blocks"
|
|
975
180
|
}
|
|
976
181
|
],
|
|
977
182
|
"globalAttributes": [
|
|
@@ -979,124 +184,18 @@
|
|
|
979
184
|
"name": "lang",
|
|
980
185
|
"description": {
|
|
981
186
|
"kind": "markdown",
|
|
982
|
-
"value": "
|
|
187
|
+
"value": "Blocks can declare pre-processor languages using the `lang` attribute. The most common case is using TypeScript for the `<script>` block:\n\n```html\n<script lang=\"ts\">\n // use TypeScript\n</script>\n```\n\n`lang` can be applied to any block - for example we can use `<style>` with [Sass](https://sass-lang.com/) and `<template>` with [Pug](https://pugjs.org/api/getting-started.html):\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n $primary-color: #333;\n body {\n color: $primary-color;\n }\n</style>\n```\n\nNote that integration with various pre-processors may differ by toolchain. Check out the respective documentation for examples:\n\n- [Vite](https://vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
|
|
983
188
|
},
|
|
984
189
|
"values": [],
|
|
985
|
-
"references":
|
|
986
|
-
{
|
|
987
|
-
"name": "en",
|
|
988
|
-
"url": "https://vuejs.org/api/sfc-spec.html#pre-processors"
|
|
989
|
-
},
|
|
990
|
-
{
|
|
991
|
-
"name": "zh-cn",
|
|
992
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
993
|
-
},
|
|
994
|
-
{
|
|
995
|
-
"name": "zh-hk",
|
|
996
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
997
|
-
},
|
|
998
|
-
{
|
|
999
|
-
"name": "ja",
|
|
1000
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1001
|
-
},
|
|
1002
|
-
{
|
|
1003
|
-
"name": "ua",
|
|
1004
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1005
|
-
},
|
|
1006
|
-
{
|
|
1007
|
-
"name": "fr",
|
|
1008
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1009
|
-
},
|
|
1010
|
-
{
|
|
1011
|
-
"name": "ko",
|
|
1012
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1013
|
-
},
|
|
1014
|
-
{
|
|
1015
|
-
"name": "pt",
|
|
1016
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1017
|
-
},
|
|
1018
|
-
{
|
|
1019
|
-
"name": "bn",
|
|
1020
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1021
|
-
},
|
|
1022
|
-
{
|
|
1023
|
-
"name": "it",
|
|
1024
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1025
|
-
},
|
|
1026
|
-
{
|
|
1027
|
-
"name": "cs",
|
|
1028
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1029
|
-
},
|
|
1030
|
-
{
|
|
1031
|
-
"name": "ru",
|
|
1032
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1033
|
-
},
|
|
1034
|
-
{
|
|
1035
|
-
"name": "fa",
|
|
1036
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#pre-processors"
|
|
1037
|
-
}
|
|
1038
|
-
]
|
|
190
|
+
"references": "api/sfc-spec.html#pre-processors"
|
|
1039
191
|
},
|
|
1040
192
|
{
|
|
1041
193
|
"name": "src",
|
|
1042
194
|
"description": {
|
|
1043
195
|
"kind": "markdown",
|
|
1044
|
-
"value": "
|
|
196
|
+
"value": "If you prefer splitting up your `*.vue` components into multiple files, you can use the `src` attribute to import an external file for a language block:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nBeware that `src` imports follow the same path resolution rules as webpack module requests, which means:\n\n- Relative paths need to start with `./`\n- You can import resources from npm dependencies:\n\n```vue\n<!-- import a file from the installed \"todomvc-app-css\" npm package -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` imports also work with custom blocks, e.g.:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning Note\nWhile using aliases in `src`, don't start with `~`, anything after it is interpreted as a module request. This means you can reference assets inside node modules:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
|
|
1045
197
|
},
|
|
1046
|
-
"references":
|
|
1047
|
-
{
|
|
1048
|
-
"name": "en",
|
|
1049
|
-
"url": "https://vuejs.org/api/sfc-spec.html#src-imports"
|
|
1050
|
-
},
|
|
1051
|
-
{
|
|
1052
|
-
"name": "zh-cn",
|
|
1053
|
-
"url": "https://cn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1054
|
-
},
|
|
1055
|
-
{
|
|
1056
|
-
"name": "zh-hk",
|
|
1057
|
-
"url": "https://zh-hk.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1058
|
-
},
|
|
1059
|
-
{
|
|
1060
|
-
"name": "ja",
|
|
1061
|
-
"url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1062
|
-
},
|
|
1063
|
-
{
|
|
1064
|
-
"name": "ua",
|
|
1065
|
-
"url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1066
|
-
},
|
|
1067
|
-
{
|
|
1068
|
-
"name": "fr",
|
|
1069
|
-
"url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1070
|
-
},
|
|
1071
|
-
{
|
|
1072
|
-
"name": "ko",
|
|
1073
|
-
"url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1074
|
-
},
|
|
1075
|
-
{
|
|
1076
|
-
"name": "pt",
|
|
1077
|
-
"url": "https://pt.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1078
|
-
},
|
|
1079
|
-
{
|
|
1080
|
-
"name": "bn",
|
|
1081
|
-
"url": "https://bn.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1082
|
-
},
|
|
1083
|
-
{
|
|
1084
|
-
"name": "it",
|
|
1085
|
-
"url": "https://it.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1086
|
-
},
|
|
1087
|
-
{
|
|
1088
|
-
"name": "cs",
|
|
1089
|
-
"url": "https://cs.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1090
|
-
},
|
|
1091
|
-
{
|
|
1092
|
-
"name": "ru",
|
|
1093
|
-
"url": "https://ru.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1094
|
-
},
|
|
1095
|
-
{
|
|
1096
|
-
"name": "fa",
|
|
1097
|
-
"url": "https://fa.vuejs.org/api/sfc-spec.html#src-imports"
|
|
1098
|
-
}
|
|
1099
|
-
]
|
|
198
|
+
"references": "api/sfc-spec.html#src-imports"
|
|
1100
199
|
}
|
|
1101
200
|
]
|
|
1102
201
|
}
|