@vue/language-service 1.7.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.
Files changed (48) hide show
  1. package/LICENSE +21 -0
  2. package/data/language-blocks/en.json +626 -0
  3. package/data/language-blocks/fr.json +626 -0
  4. package/data/language-blocks/ja.json +626 -0
  5. package/data/language-blocks/ko.json +626 -0
  6. package/data/language-blocks/zh-cn.json +626 -0
  7. package/data/language-blocks/zh-tw.json +626 -0
  8. package/data/model-modifiers/en.json +104 -0
  9. package/data/model-modifiers/fr.json +104 -0
  10. package/data/model-modifiers/ja.json +104 -0
  11. package/data/model-modifiers/ko.json +104 -0
  12. package/data/model-modifiers/zh-cn.json +104 -0
  13. package/data/model-modifiers/zh-tw.json +104 -0
  14. package/data/template/en.json +866 -0
  15. package/data/template/fr.json +866 -0
  16. package/data/template/ja.json +866 -0
  17. package/data/template/ko.json +866 -0
  18. package/data/template/zh-cn.json +866 -0
  19. package/data/template/zh-tw.json +866 -0
  20. package/out/helpers.d.ts +15 -0
  21. package/out/helpers.js +246 -0
  22. package/out/ideFeatures/nameCasing.d.ts +13 -0
  23. package/out/ideFeatures/nameCasing.js +173 -0
  24. package/out/index.d.ts +5 -0
  25. package/out/index.js +24 -0
  26. package/out/languageService.d.ts +9 -0
  27. package/out/languageService.js +243 -0
  28. package/out/plugins/data.d.ts +4 -0
  29. package/out/plugins/data.js +90 -0
  30. package/out/plugins/vue-autoinsert-dotvalue.d.ts +7 -0
  31. package/out/plugins/vue-autoinsert-dotvalue.js +157 -0
  32. package/out/plugins/vue-autoinsert-parentheses.d.ts +3 -0
  33. package/out/plugins/vue-autoinsert-parentheses.js +67 -0
  34. package/out/plugins/vue-autoinsert-space.d.ts +3 -0
  35. package/out/plugins/vue-autoinsert-space.js +30 -0
  36. package/out/plugins/vue-codelens-references.d.ts +2 -0
  37. package/out/plugins/vue-codelens-references.js +53 -0
  38. package/out/plugins/vue-template.d.ts +10 -0
  39. package/out/plugins/vue-template.js +538 -0
  40. package/out/plugins/vue-twoslash-queries.d.ts +3 -0
  41. package/out/plugins/vue-twoslash-queries.js +59 -0
  42. package/out/plugins/vue-visualize-hidden-callback-param.d.ts +3 -0
  43. package/out/plugins/vue-visualize-hidden-callback-param.js +42 -0
  44. package/out/plugins/vue.d.ts +8 -0
  45. package/out/plugins/vue.js +137 -0
  46. package/out/types.d.ts +10 -0
  47. package/out/types.js +31 -0
  48. package/package.json +44 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2021-present Johnson Chu
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
@@ -0,0 +1,626 @@
1
+ {
2
+ "version": 1.1,
3
+ "tags": [
4
+ {
5
+ "name": "template",
6
+ "attributes": [
7
+ {
8
+ "name": "src",
9
+ "description": {
10
+ "kind": "markdown",
11
+ "value": "\nIf 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"
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": "ja",
24
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
25
+ },
26
+ {
27
+ "name": "ua",
28
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
29
+ },
30
+ {
31
+ "name": "fr",
32
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
33
+ },
34
+ {
35
+ "name": "ko",
36
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
37
+ }
38
+ ]
39
+ },
40
+ {
41
+ "name": "lang",
42
+ "description": {
43
+ "kind": "markdown",
44
+ "value": "\nBlocks 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)\n"
45
+ },
46
+ "values": [
47
+ {
48
+ "name": "html"
49
+ },
50
+ {
51
+ "name": "pug"
52
+ }
53
+ ],
54
+ "references": [
55
+ {
56
+ "name": "en",
57
+ "url": "https://vuejs.org/api/sfc-spec.html#pre-processors"
58
+ },
59
+ {
60
+ "name": "zh-cn",
61
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#pre-processors"
62
+ },
63
+ {
64
+ "name": "ja",
65
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#pre-processors"
66
+ },
67
+ {
68
+ "name": "ua",
69
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#pre-processors"
70
+ },
71
+ {
72
+ "name": "fr",
73
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#pre-processors"
74
+ },
75
+ {
76
+ "name": "ko",
77
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#pre-processors"
78
+ }
79
+ ]
80
+ }
81
+ ],
82
+ "description": {
83
+ "kind": "markdown",
84
+ "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"
85
+ },
86
+ "references": [
87
+ {
88
+ "name": "en",
89
+ "url": "https://vuejs.org/api/sfc-spec.html#template"
90
+ },
91
+ {
92
+ "name": "zh-cn",
93
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#template"
94
+ },
95
+ {
96
+ "name": "ja",
97
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#template"
98
+ },
99
+ {
100
+ "name": "ua",
101
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#template"
102
+ },
103
+ {
104
+ "name": "fr",
105
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#template"
106
+ },
107
+ {
108
+ "name": "ko",
109
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#template"
110
+ }
111
+ ]
112
+ },
113
+ {
114
+ "name": "script",
115
+ "attributes": [
116
+ {
117
+ "name": "src",
118
+ "description": {
119
+ "kind": "markdown",
120
+ "value": "\nIf 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"
121
+ },
122
+ "references": [
123
+ {
124
+ "name": "en",
125
+ "url": "https://vuejs.org/api/sfc-spec.html#src-imports"
126
+ },
127
+ {
128
+ "name": "zh-cn",
129
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#src-imports"
130
+ },
131
+ {
132
+ "name": "ja",
133
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
134
+ },
135
+ {
136
+ "name": "ua",
137
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
138
+ },
139
+ {
140
+ "name": "fr",
141
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
142
+ },
143
+ {
144
+ "name": "ko",
145
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
146
+ }
147
+ ]
148
+ },
149
+ {
150
+ "name": "lang",
151
+ "description": {
152
+ "kind": "markdown",
153
+ "value": "\nBlocks 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)\n"
154
+ },
155
+ "values": [
156
+ {
157
+ "name": "ts"
158
+ },
159
+ {
160
+ "name": "js"
161
+ },
162
+ {
163
+ "name": "tsx"
164
+ },
165
+ {
166
+ "name": "jsx"
167
+ }
168
+ ],
169
+ "references": [
170
+ {
171
+ "name": "en",
172
+ "url": "https://vuejs.org/api/sfc-spec.html#pre-processors"
173
+ },
174
+ {
175
+ "name": "zh-cn",
176
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#pre-processors"
177
+ },
178
+ {
179
+ "name": "ja",
180
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#pre-processors"
181
+ },
182
+ {
183
+ "name": "ua",
184
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#pre-processors"
185
+ },
186
+ {
187
+ "name": "fr",
188
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#pre-processors"
189
+ },
190
+ {
191
+ "name": "ko",
192
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#pre-processors"
193
+ }
194
+ ]
195
+ },
196
+ {
197
+ "name": "generic"
198
+ },
199
+ {
200
+ "name": "setup",
201
+ "valueSet": "v",
202
+ "description": {
203
+ "kind": "markdown",
204
+ "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"
205
+ },
206
+ "references": [
207
+ {
208
+ "name": "en",
209
+ "url": "https://vuejs.org/api/sfc-spec.html#script-setup"
210
+ },
211
+ {
212
+ "name": "zh-cn",
213
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#script-setup"
214
+ },
215
+ {
216
+ "name": "ja",
217
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#script-setup"
218
+ },
219
+ {
220
+ "name": "ua",
221
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#script-setup"
222
+ },
223
+ {
224
+ "name": "fr",
225
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#script-setup"
226
+ },
227
+ {
228
+ "name": "ko",
229
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#script-setup"
230
+ }
231
+ ]
232
+ }
233
+ ],
234
+ "description": {
235
+ "kind": "markdown",
236
+ "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"
237
+ },
238
+ "references": [
239
+ {
240
+ "name": "en",
241
+ "url": "https://vuejs.org/api/sfc-spec.html#script"
242
+ },
243
+ {
244
+ "name": "zh-cn",
245
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#script"
246
+ },
247
+ {
248
+ "name": "ja",
249
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#script"
250
+ },
251
+ {
252
+ "name": "ua",
253
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#script"
254
+ },
255
+ {
256
+ "name": "fr",
257
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#script"
258
+ },
259
+ {
260
+ "name": "ko",
261
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#script"
262
+ }
263
+ ]
264
+ },
265
+ {
266
+ "name": "script setup",
267
+ "attributes": [],
268
+ "description": {
269
+ "kind": "markdown",
270
+ "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"
271
+ },
272
+ "references": [
273
+ {
274
+ "name": "en",
275
+ "url": "https://vuejs.org/api/sfc-spec.html#script-setup"
276
+ },
277
+ {
278
+ "name": "zh-cn",
279
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#script-setup"
280
+ },
281
+ {
282
+ "name": "ja",
283
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#script-setup"
284
+ },
285
+ {
286
+ "name": "ua",
287
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#script-setup"
288
+ },
289
+ {
290
+ "name": "fr",
291
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#script-setup"
292
+ },
293
+ {
294
+ "name": "ko",
295
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#script-setup"
296
+ }
297
+ ]
298
+ },
299
+ {
300
+ "name": "style",
301
+ "attributes": [
302
+ {
303
+ "name": "src",
304
+ "description": {
305
+ "kind": "markdown",
306
+ "value": "\nIf 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"
307
+ },
308
+ "references": [
309
+ {
310
+ "name": "en",
311
+ "url": "https://vuejs.org/api/sfc-spec.html#src-imports"
312
+ },
313
+ {
314
+ "name": "zh-cn",
315
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#src-imports"
316
+ },
317
+ {
318
+ "name": "ja",
319
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
320
+ },
321
+ {
322
+ "name": "ua",
323
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
324
+ },
325
+ {
326
+ "name": "fr",
327
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
328
+ },
329
+ {
330
+ "name": "ko",
331
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
332
+ }
333
+ ]
334
+ },
335
+ {
336
+ "name": "lang",
337
+ "description": {
338
+ "kind": "markdown",
339
+ "value": "\nBlocks 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)\n"
340
+ },
341
+ "values": [
342
+ {
343
+ "name": "css"
344
+ },
345
+ {
346
+ "name": "scss"
347
+ },
348
+ {
349
+ "name": "less"
350
+ },
351
+ {
352
+ "name": "stylus"
353
+ },
354
+ {
355
+ "name": "postcss"
356
+ },
357
+ {
358
+ "name": "sass"
359
+ }
360
+ ],
361
+ "references": [
362
+ {
363
+ "name": "en",
364
+ "url": "https://vuejs.org/api/sfc-spec.html#pre-processors"
365
+ },
366
+ {
367
+ "name": "zh-cn",
368
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#pre-processors"
369
+ },
370
+ {
371
+ "name": "ja",
372
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#pre-processors"
373
+ },
374
+ {
375
+ "name": "ua",
376
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#pre-processors"
377
+ },
378
+ {
379
+ "name": "fr",
380
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#pre-processors"
381
+ },
382
+ {
383
+ "name": "ko",
384
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#pre-processors"
385
+ }
386
+ ]
387
+ },
388
+ {
389
+ "name": "scoped",
390
+ "valueSet": "v",
391
+ "description": {
392
+ "kind": "markdown",
393
+ "value": "\nWhen 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.\n"
394
+ },
395
+ "references": [
396
+ {
397
+ "name": "en",
398
+ "url": "https://vuejs.org/api/sfc-css-features.html#scoped-css"
399
+ },
400
+ {
401
+ "name": "zh-cn",
402
+ "url": "https://cn.vuejs.org/api/sfc-css-features.html#scoped-css"
403
+ },
404
+ {
405
+ "name": "ja",
406
+ "url": "https://ja.vuejs.org/api/sfc-css-features.html#scoped-css"
407
+ },
408
+ {
409
+ "name": "ua",
410
+ "url": "https://ua.vuejs.org/api/sfc-css-features.html#scoped-css"
411
+ },
412
+ {
413
+ "name": "fr",
414
+ "url": "https://fr.vuejs.org/api/sfc-css-features.html#scoped-css"
415
+ },
416
+ {
417
+ "name": "ko",
418
+ "url": "https://ko.vuejs.org/api/sfc-css-features.html#scoped-css"
419
+ }
420
+ ]
421
+ },
422
+ {
423
+ "name": "module",
424
+ "valueSet": "v",
425
+ "description": {
426
+ "kind": "markdown",
427
+ "value": "\nA `<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#exceptions) and [composition](https://github.com/css-modules/css-modules#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"
428
+ },
429
+ "references": [
430
+ {
431
+ "name": "en",
432
+ "url": "https://vuejs.org/api/sfc-css-features.html#css-modules"
433
+ },
434
+ {
435
+ "name": "zh-cn",
436
+ "url": "https://cn.vuejs.org/api/sfc-css-features.html#css-modules"
437
+ },
438
+ {
439
+ "name": "ja",
440
+ "url": "https://ja.vuejs.org/api/sfc-css-features.html#css-modules"
441
+ },
442
+ {
443
+ "name": "ua",
444
+ "url": "https://ua.vuejs.org/api/sfc-css-features.html#css-modules"
445
+ },
446
+ {
447
+ "name": "fr",
448
+ "url": "https://fr.vuejs.org/api/sfc-css-features.html#css-modules"
449
+ },
450
+ {
451
+ "name": "ko",
452
+ "url": "https://ko.vuejs.org/api/sfc-css-features.html#css-modules"
453
+ }
454
+ ]
455
+ }
456
+ ],
457
+ "description": {
458
+ "kind": "markdown",
459
+ "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"
460
+ },
461
+ "references": [
462
+ {
463
+ "name": "en",
464
+ "url": "https://vuejs.org/api/sfc-spec.html#style"
465
+ },
466
+ {
467
+ "name": "zh-cn",
468
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#style"
469
+ },
470
+ {
471
+ "name": "ja",
472
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#style"
473
+ },
474
+ {
475
+ "name": "ua",
476
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#style"
477
+ },
478
+ {
479
+ "name": "fr",
480
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#style"
481
+ },
482
+ {
483
+ "name": "ko",
484
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#style"
485
+ }
486
+ ]
487
+ },
488
+ {
489
+ "name": "Custom Blocks",
490
+ "attributes": [
491
+ {
492
+ "name": "src",
493
+ "description": {
494
+ "kind": "markdown",
495
+ "value": "\nIf 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"
496
+ },
497
+ "references": [
498
+ {
499
+ "name": "en",
500
+ "url": "https://vuejs.org/api/sfc-spec.html#src-imports"
501
+ },
502
+ {
503
+ "name": "zh-cn",
504
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#src-imports"
505
+ },
506
+ {
507
+ "name": "ja",
508
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
509
+ },
510
+ {
511
+ "name": "ua",
512
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
513
+ },
514
+ {
515
+ "name": "fr",
516
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
517
+ },
518
+ {
519
+ "name": "ko",
520
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
521
+ }
522
+ ]
523
+ }
524
+ ],
525
+ "description": {
526
+ "kind": "markdown",
527
+ "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/vite-plugin-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"
528
+ },
529
+ "references": [
530
+ {
531
+ "name": "en",
532
+ "url": "https://vuejs.org/api/sfc-spec.html#custom-blocks"
533
+ },
534
+ {
535
+ "name": "zh-cn",
536
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#custom-blocks"
537
+ },
538
+ {
539
+ "name": "ja",
540
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#custom-blocks"
541
+ },
542
+ {
543
+ "name": "ua",
544
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#custom-blocks"
545
+ },
546
+ {
547
+ "name": "fr",
548
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#custom-blocks"
549
+ },
550
+ {
551
+ "name": "ko",
552
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#custom-blocks"
553
+ }
554
+ ]
555
+ }
556
+ ],
557
+ "globalAttributes": [
558
+ {
559
+ "name": "lang",
560
+ "description": {
561
+ "kind": "markdown",
562
+ "value": "\nBlocks 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)\n"
563
+ },
564
+ "values": [],
565
+ "references": [
566
+ {
567
+ "name": "en",
568
+ "url": "https://vuejs.org/api/sfc-spec.html#pre-processors"
569
+ },
570
+ {
571
+ "name": "zh-cn",
572
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#pre-processors"
573
+ },
574
+ {
575
+ "name": "ja",
576
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#pre-processors"
577
+ },
578
+ {
579
+ "name": "ua",
580
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#pre-processors"
581
+ },
582
+ {
583
+ "name": "fr",
584
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#pre-processors"
585
+ },
586
+ {
587
+ "name": "ko",
588
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#pre-processors"
589
+ }
590
+ ]
591
+ },
592
+ {
593
+ "name": "src",
594
+ "description": {
595
+ "kind": "markdown",
596
+ "value": "\nIf 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"
597
+ },
598
+ "references": [
599
+ {
600
+ "name": "en",
601
+ "url": "https://vuejs.org/api/sfc-spec.html#src-imports"
602
+ },
603
+ {
604
+ "name": "zh-cn",
605
+ "url": "https://cn.vuejs.org/api/sfc-spec.html#src-imports"
606
+ },
607
+ {
608
+ "name": "ja",
609
+ "url": "https://ja.vuejs.org/api/sfc-spec.html#src-imports"
610
+ },
611
+ {
612
+ "name": "ua",
613
+ "url": "https://ua.vuejs.org/api/sfc-spec.html#src-imports"
614
+ },
615
+ {
616
+ "name": "fr",
617
+ "url": "https://fr.vuejs.org/api/sfc-spec.html#src-imports"
618
+ },
619
+ {
620
+ "name": "ko",
621
+ "url": "https://ko.vuejs.org/api/sfc-spec.html#src-imports"
622
+ }
623
+ ]
624
+ }
625
+ ]
626
+ }