@vue/language-service 2.1.10 → 2.2.2

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 (53) hide show
  1. package/data/language-blocks/cs.json +29 -930
  2. package/data/language-blocks/en.json +28 -929
  3. package/data/language-blocks/fr.json +28 -929
  4. package/data/language-blocks/it.json +28 -929
  5. package/data/language-blocks/ja.json +28 -929
  6. package/data/language-blocks/ko.json +28 -929
  7. package/data/language-blocks/pt.json +28 -929
  8. package/data/language-blocks/ru.json +28 -929
  9. package/data/language-blocks/zh-cn.json +30 -931
  10. package/data/language-blocks/zh-hk.json +28 -929
  11. package/data/locale.json +54 -0
  12. package/data/model-modifiers/cs.json +6 -165
  13. package/data/model-modifiers/en.json +6 -165
  14. package/data/model-modifiers/fr.json +6 -165
  15. package/data/model-modifiers/it.json +6 -165
  16. package/data/model-modifiers/ja.json +6 -165
  17. package/data/model-modifiers/ko.json +6 -165
  18. package/data/model-modifiers/pt.json +6 -165
  19. package/data/model-modifiers/ru.json +6 -165
  20. package/data/model-modifiers/zh-cn.json +6 -165
  21. package/data/model-modifiers/zh-hk.json +6 -165
  22. package/data/template/cs.json +59 -1429
  23. package/data/template/en.json +52 -1422
  24. package/data/template/fr.json +55 -1425
  25. package/data/template/it.json +49 -1427
  26. package/data/template/ja.json +53 -1423
  27. package/data/template/ko.json +44 -1422
  28. package/data/template/pt.json +44 -1422
  29. package/data/template/ru.json +52 -1422
  30. package/data/template/zh-cn.json +53 -1423
  31. package/data/template/zh-hk.json +44 -1422
  32. package/index.d.ts +2 -2
  33. package/index.js +14 -10
  34. package/lib/ideFeatures/nameCasing.js +15 -17
  35. package/lib/plugins/data.js +47 -20
  36. package/lib/plugins/utils.d.ts +3 -0
  37. package/lib/plugins/utils.js +14 -0
  38. package/lib/plugins/vue-autoinsert-dotvalue.d.ts +0 -9
  39. package/lib/plugins/vue-autoinsert-dotvalue.js +37 -53
  40. package/lib/plugins/vue-autoinsert-space.js +1 -1
  41. package/lib/plugins/vue-complete-define-assignment.js +14 -16
  42. package/lib/plugins/vue-directive-comments.js +10 -8
  43. package/lib/plugins/vue-document-drop.js +16 -13
  44. package/lib/plugins/vue-document-links.js +45 -39
  45. package/lib/plugins/vue-extract-file.d.ts +2 -1
  46. package/lib/plugins/vue-extract-file.js +29 -15
  47. package/lib/plugins/vue-inlayhints.d.ts +2 -2
  48. package/lib/plugins/vue-inlayhints.js +65 -56
  49. package/lib/plugins/vue-sfc.js +29 -27
  50. package/lib/plugins/vue-template.js +223 -201
  51. package/lib/plugins/vue-twoslash-queries.js +9 -4
  52. package/package.json +12 -11
  53. 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": "\nЕсли вы предпочитаете разделять компоненты `*.vue` на несколько файлов, вы можете использовать атрибут `src` для импорта внешнего файла для языковой секции:\n\n```vue\n<template src=\"./template\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nИмпорты через `src` следуют тем же правилам разрешения путей, что и запросы модулей webpack, что означает:\n\n- Относительные пути должны начинаться с `./`\n- Можно импортировать ресурсы из зависимостей npm:\n\n```vue\n<!-- импорт файла из установленного npm-пакета \"todomvc-app-css\" -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\nИмпорты через `src` также работают с пользовательскими секциями, например:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n"
11
+ "value": "Если вы предпочитаете разделять компоненты `*.vue` на несколько файлов, вы можете использовать атрибут `src` для импорта внешнего файла для языковой секции:\n\n```vue\n<template src=\"./template\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nИмпорты через `src` следуют тем же правилам разрешения путей, что и запросы модулей webpack, что означает:\n\n- Относительные пути должны начинаться с `./`\n- Можно импортировать ресурсы из зависимостей npm:\n\n```vue\n<!-- импорт файла из установленного npm-пакета \"todomvc-app-css\" -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\nИмпорты через `src` также работают с пользовательскими секциями, например:\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": "\nВ секциях можно объявить язык пре-процессора с помощью атрибута `lang`. Наиболее распространённый случай — использование TypeScript для секции `<script>`:\n\n```html\n<script lang=\"ts\">\n // используем TypeScript\n</script>\n```\n\nАтрибут `lang` можно применить к любой секции — например можно использовать [SASS](https://sass-lang.com/) в секции `<style>` и [Pug](https://pugjs.org/api/getting-started.html) в секции `<template>`:\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\nОбратите внимание, что интеграция с различными пре-процессорами может отличаться в зависимости от инструментария. Примеры можно найти в соответствующей документации:\n\n- [Vite](https://vitejs.dev/guide/features#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors#using-pre-processors)\n"
19
+ "value": "В секциях можно объявить язык пре-процессора с помощью атрибута `lang`. Наиболее распространённый случай — использование TypeScript для секции `<script>`:\n\n```html\n<script lang=\"ts\">\n // используем TypeScript\n</script>\n```\n\nАтрибут `lang` можно применить к любой секции — например можно использовать [SASS](https://sass-lang.com/) в секции `<style>` и [Pug](https://pugjs.org/api/getting-started.html) в секции `<template>`:\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\nОбратите внимание, что интеграция с различными пре-процессорами может отличаться в зависимости от инструментария. Примеры можно найти в соответствующей документации:\n\n- [Vite](https://vitejs.dev/guide/features#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors#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- В каждом файле `*.vue` может быть не более одной секции `<template>` верхнего уровня.\n\n- Содержимое будет извлечено и передано в `@vue/compiler-dom`, где предварительно скомпилируется в render-функцию JavaScript и будет присоединено к экспортируемому компоненту в качестве его опции `render`.\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": "\nЕсли вы предпочитаете разделять компоненты `*.vue` на несколько файлов, вы можете использовать атрибут `src` для импорта внешнего файла для языковой секции:\n\n```vue\n<template src=\"./template\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nИмпорты через `src` следуют тем же правилам разрешения путей, что и запросы модулей webpack, что означает:\n\n- Относительные пути должны начинаться с `./`\n- Можно импортировать ресурсы из зависимостей npm:\n\n```vue\n<!-- импорт файла из установленного npm-пакета \"todomvc-app-css\" -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\nИмпорты через `src` также работают с пользовательскими секциями, например:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n"
45
+ "value": "Если вы предпочитаете разделять компоненты `*.vue` на несколько файлов, вы можете использовать атрибут `src` для импорта внешнего файла для языковой секции:\n\n```vue\n<template src=\"./template\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nИмпорты через `src` следуют тем же правилам разрешения путей, что и запросы модулей webpack, что означает:\n\n- Относительные пути должны начинаться с `./`\n- Можно импортировать ресурсы из зависимостей npm:\n\n```vue\n<!-- импорт файла из установленного npm-пакета \"todomvc-app-css\" -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\nИмпорты через `src` также работают с пользовательскими секциями, например:\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": "\nВ секциях можно объявить язык пре-процессора с помощью атрибута `lang`. Наиболее распространённый случай — использование TypeScript для секции `<script>`:\n\n```html\n<script lang=\"ts\">\n // используем TypeScript\n</script>\n```\n\nАтрибут `lang` можно применить к любой секции — например можно использовать [SASS](https://sass-lang.com/) в секции `<style>` и [Pug](https://pugjs.org/api/getting-started.html) в секции `<template>`:\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\nОбратите внимание, что интеграция с различными пре-процессорами может отличаться в зависимости от инструментария. Примеры можно найти в соответствующей документации:\n\n- [Vite](https://vitejs.dev/guide/features#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors#using-pre-processors)\n"
53
+ "value": "В секциях можно объявить язык пре-процессора с помощью атрибута `lang`. Наиболее распространённый случай — использование TypeScript для секции `<script>`:\n\n```html\n<script lang=\"ts\">\n // используем TypeScript\n</script>\n```\n\nАтрибут `lang` можно применить к любой секции — например можно использовать [SASS](https://sass-lang.com/) в секции `<style>` и [Pug](https://pugjs.org/api/getting-started.html) в секции `<template>`:\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\nОбратите внимание, что интеграция с различными пре-процессорами может отличаться в зависимости от инструментария. Примеры можно найти в соответствующей документации:\n\n- [Vite](https://vitejs.dev/guide/features#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors#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- В каждом файле `*.vue` может быть не более одной секции`<script setup>` (не считая обычной секции `<script>`).\n\n- Секция предварительно обрабатывается и используется в качестве функции компонента `setup()`, то есть он будет выполняться **для каждого экземпляра компонента**. Привязки верхнего уровня в `<script setup>` автоматически становятся доступны шаблону. Подробнее об этом см. на [специальной странице документации про `<script setup>`](https://ru.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- Каждый файл `*.vue` может иметь не более одной секции `<script>` (за исключением случаев использования [`<script setup>`](https://ru.vuejs.org/api/sfc-script-setup.html)).\n\n- Скрипт выполняется как ES-модуль.\n\n- **Экспорт по умолчанию** должен быть объектом опций компонента Vue, либо обычным объектом, либо значением, которое возвращает [defineComponent](https://ru.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- В каждом файле `*.vue` может быть не более одной секции`<script setup>` (не считая обычной секции `<script>`).\n\n- Секция предварительно обрабатывается и используется в качестве функции компонента `setup()`, то есть он будет выполняться **для каждого экземпляра компонента**. Привязки верхнего уровня в `<script setup>` автоматически становятся доступны шаблону. Подробнее об этом см. на [специальной странице документации про `<script setup>`](https://ru.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": "\nЕсли вы предпочитаете разделять компоненты `*.vue` на несколько файлов, вы можете использовать атрибут `src` для импорта внешнего файла для языковой секции:\n\n```vue\n<template src=\"./template\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nИмпорты через `src` следуют тем же правилам разрешения путей, что и запросы модулей webpack, что означает:\n\n- Относительные пути должны начинаться с `./`\n- Можно импортировать ресурсы из зависимостей npm:\n\n```vue\n<!-- импорт файла из установленного npm-пакета \"todomvc-app-css\" -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\nИмпорты через `src` также работают с пользовательскими секциями, например:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n"
106
+ "value": "Если вы предпочитаете разделять компоненты `*.vue` на несколько файлов, вы можете использовать атрибут `src` для импорта внешнего файла для языковой секции:\n\n```vue\n<template src=\"./template\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nИмпорты через `src` следуют тем же правилам разрешения путей, что и запросы модулей webpack, что означает:\n\n- Относительные пути должны начинаться с `./`\n- Можно импортировать ресурсы из зависимостей npm:\n\n```vue\n<!-- импорт файла из установленного npm-пакета \"todomvc-app-css\" -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\nИмпорты через `src` также работают с пользовательскими секциями, например:\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": "\nВ секциях можно объявить язык пре-процессора с помощью атрибута `lang`. Наиболее распространённый случай — использование TypeScript для секции `<script>`:\n\n```html\n<script lang=\"ts\">\n // используем TypeScript\n</script>\n```\n\nАтрибут `lang` можно применить к любой секции — например можно использовать [SASS](https://sass-lang.com/) в секции `<style>` и [Pug](https://pugjs.org/api/getting-started.html) в секции `<template>`:\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\nОбратите внимание, что интеграция с различными пре-процессорами может отличаться в зависимости от инструментария. Примеры можно найти в соответствующей документации:\n\n- [Vite](https://vitejs.dev/guide/features#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors#using-pre-processors)\n"
114
+ "value": "В секциях можно объявить язык пре-процессора с помощью атрибута `lang`. Наиболее распространённый случай — использование TypeScript для секции `<script>`:\n\n```html\n<script lang=\"ts\">\n // используем TypeScript\n</script>\n```\n\nАтрибут `lang` можно применить к любой секции — например можно использовать [SASS](https://sass-lang.com/) в секции `<style>` и [Pug](https://pugjs.org/api/getting-started.html) в секции `<template>`:\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\nОбратите внимание, что интеграция с различными пре-процессорами может отличаться в зависимости от инструментария. Примеры можно найти в соответствующей документации:\n\n- [Vite](https://vitejs.dev/guide/features#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors#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": "\nКогда секция `<style>` имеет атрибут `scoped`, его CSS будет применяться только к элементам текущего компонента. Это похоже на инкапсуляцию стилей в Shadow DOM. Есть некоторые оговорки, но зато не требуется никаких полифилов. Это достигается путем использования PostCSS для преобразования следующего кода:\n\n```vue\n<style scoped>\n.example {\n color: red;\n}\n</style>\n\n<template>\n <div class=\"example\">привет</div>\n</template>\n```\n\nВ этот код:\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>привет</div>\n</template>\n```\n\n### Корневые элементы дочернего компонента \n\nПри использовании `scoped` стили родительского компонента не будут проникать в дочерние компоненты. Однако корневой элемент дочернего компонента будет подвержен влиянию как родительского, так и дочернего CSS. Это сделано специально для того, чтобы родитель мог стилизовать корневой элемент дочернего компонента в целях вёрстки.\n\n### Глубокие селекторы \n\nЕсли требуется, чтобы селектор в `scoped` стилях был \"глубоким\", т.е. влиял на дочерние компоненты, можно использовать псевдокласс `:deep()`:\n\n```vue\n<style scoped>\n.a :deep(.b) {\n /* ... */\n}\n</style>\n```\n\nКод выше будет скомпилирован в:\n\n```css\n.a[data-v-f3f3eg9] .b {\n /* ... */\n}\n```\n\n:::tip Совет\nСодержимое DOM, созданное при помощи `v-html`, не подвержено влиянию стилей c ограниченной областью действия, но его все же можно стилизовать с помощью глубоких селекторов.\n:::\n\n### Селекторы слотов \n\nПо умолчанию стили с ограниченной областью действия не влияют на содержимое, отображаемое с помощью `<slot/>`, так как считается, что оно принадлежит родительскому компоненту, который его передаёт. Чтобы явно указать на содержимое слота, используйте псевдокласс `:slotted`:\n\n```vue\n<style scoped>\n:slotted(div) {\n color: red;\n}\n</style>\n```\n\n### Глобальные селекторы \n\nЕсли необходимо, чтобы одно правило применялось глобально, можно использовать псевдокласс `:global`, а не создавать еще одну секцию `<style>` (см. ниже):\n\n```vue\n<style scoped>\n:global(.red) {\n color: red;\n}\n</style>\n```\n\n### Сочетание локальных и глобальных стилей \n\nВ одном компоненте можно вместе использовать как scoped, так и обычные секции style:\n\n```vue\n<style>\n/* глобальные стили */\n</style>\n\n<style scoped>\n/* локальные стили */\n</style>\n```\n\n### Советы по использованию стилей с ограниченной областью действия \n\n- **Стили с ограниченной областью действия не избавляют от необходимости использования классов**. Ввиду того, как браузеры отрисовывают различные CSS-селекторы, `p { color: red }` будет работать гораздо медленнее при использовании стилей с ограниченной областью действия (т.е. в сочетании с селектором атрибутов). Если вместо этого использовать классы или идентификаторы, как, например, в `.example { color: red }`, то это практически исключает снижение производительности.\n\n- **Будьте осторожны с селекторами потомков в рекурсивных компонентах!** Для правила CSS с селектором `.a .b`, если элемент, соответствующий `.a`, содержит рекурсивный дочерний компонент, то все `.b` в этом дочернем компоненте будут соответствовать правилу.\n"
143
+ "value": "Когда секция `<style>` имеет атрибут `scoped`, его CSS будет применяться только к элементам текущего компонента. Это похоже на инкапсуляцию стилей в Shadow DOM. Есть некоторые оговорки, но зато не требуется никаких полифилов. Это достигается путем использования PostCSS для преобразования следующего кода:\n\n```vue\n<style scoped>\n.example {\n color: red;\n}\n</style>\n\n<template>\n <div class=\"example\">привет</div>\n</template>\n```\n\nВ этот код:\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>привет</div>\n</template>\n```\n\n### Корневые элементы дочернего компонента \n\nПри использовании `scoped` стили родительского компонента не будут проникать в дочерние компоненты. Однако корневой элемент дочернего компонента будет подвержен влиянию как родительского, так и дочернего CSS. Это сделано специально для того, чтобы родитель мог стилизовать корневой элемент дочернего компонента в целях вёрстки.\n\n### Глубокие селекторы \n\nЕсли требуется, чтобы селектор в `scoped` стилях был \"глубоким\", т.е. влиял на дочерние компоненты, можно использовать псевдокласс `:deep()`:\n\n```vue\n<style scoped>\n.a :deep(.b) {\n /* ... */\n}\n</style>\n```\n\nКод выше будет скомпилирован в:\n\n```css\n.a[data-v-f3f3eg9] .b {\n /* ... */\n}\n```\n\n:::tip Совет\nСодержимое DOM, созданное при помощи `v-html`, не подвержено влиянию стилей c ограниченной областью действия, но его все же можно стилизовать с помощью глубоких селекторов.\n:::\n\n### Селекторы слотов \n\nПо умолчанию стили с ограниченной областью действия не влияют на содержимое, отображаемое с помощью `<slot/>`, так как считается, что оно принадлежит родительскому компоненту, который его передаёт. Чтобы явно указать на содержимое слота, используйте псевдокласс `:slotted`:\n\n```vue\n<style scoped>\n:slotted(div) {\n color: red;\n}\n</style>\n```\n\n### Глобальные селекторы \n\nЕсли необходимо, чтобы одно правило применялось глобально, можно использовать псевдокласс `:global`, а не создавать еще одну секцию `<style>` (см. ниже):\n\n```vue\n<style scoped>\n:global(.red) {\n color: red;\n}\n</style>\n```\n\n### Сочетание локальных и глобальных стилей \n\nВ одном компоненте можно вместе использовать как scoped, так и обычные секции style:\n\n```vue\n<style>\n/* глобальные стили */\n</style>\n\n<style scoped>\n/* локальные стили */\n</style>\n```\n\n### Советы по использованию стилей с ограниченной областью действия \n\n- **Стили с ограниченной областью действия не избавляют от необходимости использования классов**. Ввиду того, как браузеры отрисовывают различные CSS-селекторы, `p { color: red }` будет работать гораздо медленнее при использовании стилей с ограниченной областью действия (т.е. в сочетании с селектором атрибутов). Если вместо этого использовать классы или идентификаторы, как, например, в `.example { color: red }`, то это практически исключает снижение производительности.\n\n- **Будьте осторожны с селекторами потомков в рекурсивных компонентах!** Для правила CSS с селектором `.a .b`, если элемент, соответствующий `.a`, содержит рекурсивный дочерний компонент, то все `.b` в этом дочернем компоненте будут соответствовать правилу."
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": "\nСекция `<style module>` компилируется как [CSS модуль](https://github.com/css-modules/css-modules) и объявляет результирующие CSS-классы компоненту в виде объекта под ключом `$style`:\n\n```vue\n<template>\n <p :class=\"$style.red\">Это должно быть красным</p>\n</template>\n\n<style module>\n.red {\n color: red;\n}\n</style>\n```\n\nПолученные классы хэшируются во избежание коллизий, что позволяет добиться того же эффекта, что и при выборе CSS с ограниченной областью действия только для текущего компонента.\n\nОбратитесь к [спецификации CSS модулей](https://github.com/css-modules/css-modules) для получения более подробной информации, такой как [глобальные исключения](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#exceptions) и [композиция](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#composition).\n\n### Внедрение пользовательского имени \n\nМожно настроить ключ свойства объекта внедряемых классов, указав значение атрибуту `module`:\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### Использование с Composition API \n\nДоступ к внедряемым классам можно получить в `setup()` и `<script setup>` через API `useCssModule`. Для секций `<style module>` с пользовательским внедряемым именем, `useCssModule` принимает в качестве первого аргумента соответствующее значение атрибута `module`:\n\n```js\nimport { useCssModule } from 'vue'\n\n// внутри области видимости setup()...\n// по умолчанию, возвращает классы для <style module>\nuseCssModule()\n\n// при указании имени, возвращает классы для <style module=\"classes\">\nuseCssModule('classes')\n```\n"
152
+ "value": "Секция `<style module>` компилируется как [CSS модуль](https://github.com/css-modules/css-modules) и объявляет результирующие CSS-классы компоненту в виде объекта под ключом `$style`:\n\n```vue\n<template>\n <p :class=\"$style.red\">Это должно быть красным</p>\n</template>\n\n<style module>\n.red {\n color: red;\n}\n</style>\n```\n\nПолученные классы хэшируются во избежание коллизий, что позволяет добиться того же эффекта, что и при выборе CSS с ограниченной областью действия только для текущего компонента.\n\nОбратитесь к [спецификации CSS модулей](https://github.com/css-modules/css-modules) для получения более подробной информации, такой как [глобальные исключения](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#exceptions) и [композиция](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#composition).\n\n### Внедрение пользовательского имени \n\nМожно настроить ключ свойства объекта внедряемых классов, указав значение атрибуту `module`:\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### Использование с Composition API \n\nДоступ к внедряемым классам можно получить в `setup()` и `<script setup>` через API `useCssModule`. Для секций `<style module>` с пользовательским внедряемым именем, `useCssModule` принимает в качестве первого аргумента соответствующее значение атрибута `module`:\n\n```js\nimport { useCssModule } from 'vue'\n\n// внутри области видимости setup()...\n// по умолчанию, возвращает классы для <style module>\nuseCssModule()\n\n// при указании имени, возвращает классы для <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- В одном файле `*.vue` может быть несколько секций `<style>`.\n\n- Тег `<style>` может иметь атрибуты `scoped` или `module` (подробнее см. разделе [возможности стилей SFC](https://ru.vuejs.org/api/sfc-css-features.html)), помогающие инкапсулировать стили для текущего компонента. В одном компоненте можно смешивать несколько тегов `<style>` с различными режимами инкапсуляции.\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": "Пользовательские секции",
@@ -856,122 +167,16 @@
856
167
  "name": "src",
857
168
  "description": {
858
169
  "kind": "markdown",
859
- "value": "\nЕсли вы предпочитаете разделять компоненты `*.vue` на несколько файлов, вы можете использовать атрибут `src` для импорта внешнего файла для языковой секции:\n\n```vue\n<template src=\"./template\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nИмпорты через `src` следуют тем же правилам разрешения путей, что и запросы модулей webpack, что означает:\n\n- Относительные пути должны начинаться с `./`\n- Можно импортировать ресурсы из зависимостей npm:\n\n```vue\n<!-- импорт файла из установленного npm-пакета \"todomvc-app-css\" -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\nИмпорты через `src` также работают с пользовательскими секциями, например:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n"
170
+ "value": "Если вы предпочитаете разделять компоненты `*.vue` на несколько файлов, вы можете использовать атрибут `src` для импорта внешнего файла для языковой секции:\n\n```vue\n<template src=\"./template\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nИмпорты через `src` следуют тем же правилам разрешения путей, что и запросы модулей webpack, что означает:\n\n- Относительные пути должны начинаться с `./`\n- Можно импортировать ресурсы из зависимостей npm:\n\n```vue\n<!-- импорт файла из установленного npm-пакета \"todomvc-app-css\" -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\nИмпорты через `src` также работают с пользовательскими секциями, например:\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": "\nВ файл `*.vue` могут быть включены дополнительные пользовательские секции для любых специфических нужд проекта, например, секция `<docs>`. Некоторые реальные примеры пользовательских секций:\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\nОбработка пользовательских секций зависит от инструментария — если вы хотите создать свои собственные интеграции пользовательских секций, обратитесь к разделу [инструментарий SFC](https://ru.vuejs.org/guide/scaling-up/tooling.html#sfc-custom-block-integrations) для более подробной информации.\n"
920
178
  },
921
- "references": [
922
- {
923
- "name": "en",
924
- "url": "https://vuejs.org/api/sfc-spec.html#пользовательские-секции"
925
- },
926
- {
927
- "name": "zh-cn",
928
- "url": "https://cn.vuejs.org/api/sfc-spec.html#пользовательские-секции"
929
- },
930
- {
931
- "name": "zh-hk",
932
- "url": "https://zh-hk.vuejs.org/api/sfc-spec.html#пользовательские-секции"
933
- },
934
- {
935
- "name": "ja",
936
- "url": "https://ja.vuejs.org/api/sfc-spec.html#пользовательские-секции"
937
- },
938
- {
939
- "name": "ua",
940
- "url": "https://ua.vuejs.org/api/sfc-spec.html#пользовательские-секции"
941
- },
942
- {
943
- "name": "fr",
944
- "url": "https://fr.vuejs.org/api/sfc-spec.html#пользовательские-секции"
945
- },
946
- {
947
- "name": "ko",
948
- "url": "https://ko.vuejs.org/api/sfc-spec.html#пользовательские-секции"
949
- },
950
- {
951
- "name": "pt",
952
- "url": "https://pt.vuejs.org/api/sfc-spec.html#пользовательские-секции"
953
- },
954
- {
955
- "name": "bn",
956
- "url": "https://bn.vuejs.org/api/sfc-spec.html#пользовательские-секции"
957
- },
958
- {
959
- "name": "it",
960
- "url": "https://it.vuejs.org/api/sfc-spec.html#пользовательские-секции"
961
- },
962
- {
963
- "name": "cs",
964
- "url": "https://cs.vuejs.org/api/sfc-spec.html#пользовательские-секции"
965
- },
966
- {
967
- "name": "ru",
968
- "url": "https://ru.vuejs.org/api/sfc-spec.html#пользовательские-секции"
969
- },
970
- {
971
- "name": "fa",
972
- "url": "https://fa.vuejs.org/api/sfc-spec.html#пользовательские-секции"
973
- }
974
- ]
179
+ "references": "api/sfc-spec.html#пользовательские-секции"
975
180
  }
976
181
  ],
977
182
  "globalAttributes": [
@@ -979,124 +184,18 @@
979
184
  "name": "lang",
980
185
  "description": {
981
186
  "kind": "markdown",
982
- "value": "\nВ секциях можно объявить язык пре-процессора с помощью атрибута `lang`. Наиболее распространённый случай — использование TypeScript для секции `<script>`:\n\n```html\n<script lang=\"ts\">\n // используем TypeScript\n</script>\n```\n\nАтрибут `lang` можно применить к любой секции — например можно использовать [SASS](https://sass-lang.com/) в секции `<style>` и [Pug](https://pugjs.org/api/getting-started.html) в секции `<template>`:\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\nОбратите внимание, что интеграция с различными пре-процессорами может отличаться в зависимости от инструментария. Примеры можно найти в соответствующей документации:\n\n- [Vite](https://vitejs.dev/guide/features#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors#using-pre-processors)\n"
187
+ "value": "В секциях можно объявить язык пре-процессора с помощью атрибута `lang`. Наиболее распространённый случай — использование TypeScript для секции `<script>`:\n\n```html\n<script lang=\"ts\">\n // используем TypeScript\n</script>\n```\n\nАтрибут `lang` можно применить к любой секции — например можно использовать [SASS](https://sass-lang.com/) в секции `<style>` и [Pug](https://pugjs.org/api/getting-started.html) в секции `<template>`:\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\nОбратите внимание, что интеграция с различными пре-процессорами может отличаться в зависимости от инструментария. Примеры можно найти в соответствующей документации:\n\n- [Vite](https://vitejs.dev/guide/features#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors#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": "\nЕсли вы предпочитаете разделять компоненты `*.vue` на несколько файлов, вы можете использовать атрибут `src` для импорта внешнего файла для языковой секции:\n\n```vue\n<template src=\"./template\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nИмпорты через `src` следуют тем же правилам разрешения путей, что и запросы модулей webpack, что означает:\n\n- Относительные пути должны начинаться с `./`\n- Можно импортировать ресурсы из зависимостей npm:\n\n```vue\n<!-- импорт файла из установленного npm-пакета \"todomvc-app-css\" -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\nИмпорты через `src` также работают с пользовательскими секциями, например:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n"
196
+ "value": "Если вы предпочитаете разделять компоненты `*.vue` на несколько файлов, вы можете использовать атрибут `src` для импорта внешнего файла для языковой секции:\n\n```vue\n<template src=\"./template\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"></script>\n```\n\nИмпорты через `src` следуют тем же правилам разрешения путей, что и запросы модулей webpack, что означает:\n\n- Относительные пути должны начинаться с `./`\n- Можно импортировать ресурсы из зависимостей npm:\n\n```vue\n<!-- импорт файла из установленного npm-пакета \"todomvc-app-css\" -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\nИмпорты через `src` также работают с пользовательскими секциями, например:\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
  }