Skip to content

Commit 2f51ee8

Browse files
kazuponkazupon
committed
updat docs
1 parent 04350f3 commit 2f51ee8

File tree

2 files changed

+209
-24
lines changed

2 files changed

+209
-24
lines changed

‎docs/guide/advanced/sfc.md‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ To use i18n custom blocks, you need to use the following plugins for bundler.
5353

5454
### vite-plugin-vue-i18n
5555

56-
[vite-plugin-vue-i18n](https://github.com/intlify/vite-plugin-vue-i18n) is vite plugin for [Vite](https://github.com/vitejs/vite).
56+
[vite-plugin-vue-i18n](https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n) is vite plugin for [Vite](https://github.com/vitejs/vite).
5757

5858
:::tip REQUIREMENTS
5959
- vite: **v2-beta or later**
@@ -95,7 +95,7 @@ export default defineConfig({
9595

9696
### vue-i18n-loader
9797

98-
[vue-i18n-loader](https://github.com/intlify/vue-i18n-loader) is loader plugin for [webpack](https://webpack.js.org/). Since single file components is bundled with [vue-loader](https://github.com/vuejs/vue-loader), you need to setting webpack config with vue-i18n-loader.
98+
[vue-i18n-loader](https://github.com/intlify/bundle-tools/tree/main/packages/vue-i18n-loader) is loader plugin for [webpack](https://webpack.js.org/). Since single file components is bundled with [vue-loader](https://github.com/vuejs/vue-loader), you need to setting webpack config with vue-i18n-loader.
9999

100100
:::tip REQUIREMENTS
101101
- webpack: **v4 or later**
@@ -151,7 +151,7 @@ module.exports = {
151151

152152
### rollup-plugin-vue-i18n
153153

154-
[rollup-plugin-vue-i18n](https://github.com/intlify/rollup-plugin-vue-i18n) is rollup plugin for [rollup](https://rollupjs.org). Since single-file components is bundled with [rollup-plugin-vue](https://github.com/vuejs/rollup-plugin-vue), you need to setting rollup config with rollup-plugin-vue
154+
[rollup-plugin-vue-i18n](https://github.com/intlify/bundle-tools/tree/main/packages/rollup-plugin-vue-i18n) is rollup plugin for [rollup](https://rollupjs.org). Since single-file components is bundled with [rollup-plugin-vue](https://github.com/vuejs/rollup-plugin-vue), you need to setting rollup config with rollup-plugin-vue
155155

156156
:::tip REQUIREMENTS
157157
- rollup: **v2.32 or later**
@@ -303,16 +303,15 @@ The `i18n` custom blocks below of `json5` format:
303303

304304
### Define global format
305305

306-
If you are using one of `@intlify/vite-plugin-vue-i18n`, `@intlify/vue-i18n-loader` or `@intlify/rollup-plugin-vue-i18n`
307-
plugin on your project, you can also define the `lang` for all your inlined `i18n` custom blocks
308-
on all your `SFC` using the `defaultSFCLocale` option.
306+
If you are using one of `@intlify/vite-plugin-vue-i18n` plugin on your project, you can also define the `lang` for all your inlined `i18n` custom blocks on all your SFC using the `defaultSFCLang` option.
309307

310-
:::warning:::
308+
:::warning NOTICE
311309
`@intlify/vue-i18n-loader` and `@intlify/rollup-plugin-vue-i18n` are currently in progress to add this feature.
310+
:::
312311

313312
On inlined `i18n` custom blocks that have specified the `lang` attribute, the `defaultSFCLang` is not applied.
314313

315-
For example, in order to configure `yml` format on all your inlined `i18n` custom blocks on all your `SFC`:
314+
For example, in order to configure `yml` format on all your inlined `i18n` custom blocks on all your SFC:
316315

317316
```html
318317
<!-- custom block equivalent to &lt;i18n lang="yml"> -->
@@ -324,7 +323,7 @@ es:
324323
</i18n>
325324
```
326325

327-
just configure `defaultSFCLocale: "yml"` on your plugin configuration:
326+
just configure `defaultSFCLang: "yml"` on your plugin configuration:
328327

329328
#### Use global format with vite plugin
330329

@@ -335,7 +334,7 @@ import vueI18n from '@intlify/vite-plugin-vue-i18n'
335334
plugins: [
336335
vue(),
337336
vueI18n({
338-
defaultSFCLocale: "yml",
337+
defaultSFCLang: 'yml',
339338
/* other options */
340339
})
341340
]
@@ -356,7 +355,7 @@ module.exports = {
356355
{
357356
test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
358357
type: 'javascript/auto',
359-
defaultSFCLocale: 'yml',
358+
defaultSFCLang: 'yml',
360359
/* other options */,
361360
loader: '@intlify/vue-i18n-loader'
362361
},
@@ -381,7 +380,7 @@ plugins: [
381380
VuePlugin({ customBlocks: ['i18n'] }),
382381
// set `rollup-plugin-vue-i18n` after **`rollup-plugin-vue`**
383382
VueI18nPlugin({
384-
defaultSFCLocale: 'yml',
383+
defaultSFCLang: 'yml',
385384
/* other options */
386385
}),
387386
/* other plugins */
@@ -406,17 +405,15 @@ In the above example, since the `global` attribute is set, the locale messages d
406405

407406
### Define global scope
408407

409-
If you are using one of `@intlify/vite-plugin-vue-i18n`, `@intlify/vue-i18n-loader` or
410-
`@intlify/rollup-plugin-vue-i18n`
411-
plugin on your project, you can also define the `global` scope for all your `i18n` custom blocks
412-
on all your `SFC` using the `globalSFCScope` option.
408+
If you are using one of `@intlify/vite-plugin-vue-i18n` plugin on your project, you can also define the `global` scope for all your `i18n` custom blocks on all your SFC using the `globalSFCScope` option.
413409

414-
:::warning:::
410+
:::warning NOTICE
415411
`@intlify/vue-i18n-loader` and `@intlify/rollup-plugin-vue-i18n` are currently in progress to add this feature.
412+
:::
416413

417414
**Warning**: beware enabling `globalSFCScope: true`, all `i18n` custom blocks in all your `SFC` will be on `global` scope.
418415

419-
For example, in order to configure `global` scope on all your `i18n` custom blocks on all your `SFC`:
416+
For example, in order to configure `global` scope on all your `i18n` custom blocks on all your SFC:
420417

421418
```html
422419
<!-- custom block equivalent to &lt;i18n lang="yml" global> -->
@@ -501,7 +498,7 @@ plugins: [
501498
```
502499

503500

504-
:::warning NOTICE
501+
:::warn NOTICE
505502
The locale messages for global scope defined in i18n custom blocks are available **only composition API mode**. You need to run `useI18n` option to `useScope: 'global'` at `setup`. About details, see the [Composition API](./composition).
506503
:::
507504

‎docs/ja/guide/advanced/sfc.md‎

Lines changed: 193 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
# Single file components
22

3+
34
## Basic Usage
45

56
If you are building Vue component or Vue application using single file components, you can manage the locale messages with using i18n custom block.
@@ -36,7 +37,7 @@ export default {
3637

3738
In i18n custom blocks, the format of the locale messages resource is **json** format by default.
3839

39-
The locale messages defined by i18n custom blocks are used as the local scope in single file components.
40+
The locale messages defined by i18n custom blocks, are used as the local scope in single file components.
4041

4142
If `$t('hello')` is used in the template, the `hello` key defined by `i18n` custom blocks is referred to.
4243

@@ -53,7 +54,7 @@ To use i18n custom blocks, you need to use the following plugins for bundler.
5354

5455
### vite-plugin-vue-i18n
5556

56-
[vite-plugin-vue-i18n](https://github.com/intlify/vite-plugin-vue-i18n) is vite plugin for [Vite](https://github.com/vitejs/vite).
57+
[vite-plugin-vue-i18n](https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n) is vite plugin for [Vite](https://github.com/vitejs/vite).
5758

5859
:::tip REQUIREMENTS
5960
- vite: **v2-beta or later**
@@ -68,6 +69,8 @@ npm i --save-dev @intlify/vite-plugin-vue-i18n
6869

6970
#### Configuration
7071

72+
See also [use global format](#use-global-format-with-vite-plugin) and [use global scope](#use-global-scope-with-vite-plugin).
73+
7174
vite config for example:
7275

7376
```ts
@@ -93,7 +96,7 @@ export default defineConfig({
9396

9497
### vue-i18n-loader
9598

96-
[vue-i18n-loader](https://github.com/intlify/vue-i18n-loader) is loader plugin for [webpack](https://webpack.js.org/). Since single file components is bundled with [vue-loader](https://github.com/vuejs/vue-loader), you need to setting webpack config with vue-i18n-loader.
99+
[vue-i18n-loader](https://github.com/intlify/bundle-tools/tree/main/packages/vue-i18n-loader) is loader plugin for [webpack](https://webpack.js.org/). Since single file components is bundled with [vue-loader](https://github.com/vuejs/vue-loader), you need to setting webpack config with vue-i18n-loader.
97100

98101
:::tip REQUIREMENTS
99102
- webpack: **v4 or later**
@@ -108,6 +111,8 @@ npm i --save-dev @intlify/vue-i18n-loader
108111

109112
#### Configuration
110113

114+
See also [use global format](#use-global-format-with-webpack-plugin) and [use global scope](#use-global-scope-with-webpack-plugin).
115+
111116
Webpack config for example:
112117

113118
```js
@@ -128,7 +133,7 @@ module.exports = {
128133
path.resolve(__dirname, './src/locales'),
129134
],
130135
loader: '@intlify/vue-i18n-loader'
131-
}
136+
},
132137
// for i18n custom block
133138
{
134139
resourceQuery: /blockType=i18n/,
@@ -147,7 +152,7 @@ module.exports = {
147152

148153
### rollup-plugin-vue-i18n
149154

150-
[rollup-plugin-vue-i18n](https://github.com/intlify/rollup-plugin-vue-i18n) is rollup plugin for [rollup](https://rollupjs.org). Since single-file components is bundled with [rollup-plugin-vue](https://github.com/vuejs/rollup-plugin-vue), you need to setting rollup config with rollup-plugin-vue
155+
[rollup-plugin-vue-i18n](https://github.com/intlify/bundle-tools/tree/main/packages/rollup-plugin-vue-i18n) is rollup plugin for [rollup](https://rollupjs.org). Since single-file components is bundled with [rollup-plugin-vue](https://github.com/vuejs/rollup-plugin-vue), you need to setting rollup config with rollup-plugin-vue
151156

152157
:::tip REQUIREMENTS
153158
- rollup: **v2.32 or later**
@@ -162,6 +167,8 @@ npm i --save-dev @intlify/rollup-plugin-vue-i18n
162167

163168
#### Configuration
164169

170+
See also [use global format](#use-global-format-with-rollup-plugin) and [use global scope](#use-global-scope-with-rollup-plugin).
171+
165172
Rollup config for example:
166173

167174
```js
@@ -295,6 +302,92 @@ The `i18n` custom blocks below of `json5` format:
295302
</i18n>
296303
```
297304

305+
### Define global format
306+
307+
If you are using one of `@intlify/vite-plugin-vue-i18n` plugin on your project, you can also define the `lang` for all your inlined `i18n` custom blocks on all your SFC using the `defaultSFCLang` option.
308+
309+
:::warning NOTICE
310+
`@intlify/vue-i18n-loader` and `@intlify/rollup-plugin-vue-i18n` are currently in progress to add this feature.
311+
:::
312+
313+
On inlined `i18n` custom blocks that have specified the `lang` attribute, the `defaultSFCLang` is not applied.
314+
315+
For example, in order to configure `yml` format on all your inlined `i18n` custom blocks on all your SFC:
316+
317+
```html
318+
<!-- custom block equivalent to &lt;i18n lang="yml"> -->
319+
<i18n>
320+
en:
321+
hello: Hello
322+
es:
323+
hello: Hola
324+
</i18n>
325+
```
326+
327+
just configure `defaultSFCLang: "yml"` on your plugin configuration:
328+
329+
#### Use global format with vite plugin
330+
331+
```javascript
332+
import vue from '@vitejs/plugin-vue'
333+
import vueI18n from '@intlify/vite-plugin-vue-i18n'
334+
335+
plugins: [
336+
vue(),
337+
vueI18n({
338+
defaultSFCLang: 'yml',
339+
/* other options */
340+
})
341+
]
342+
```
343+
344+
#### Use global format with webpack plugin (WIP)
345+
346+
```javascript
347+
module.exports = {
348+
// ...
349+
module: {
350+
rules: [
351+
{
352+
test: /\.vue$/,
353+
loader: 'vue-loader',
354+
},
355+
// for i18n resources (json/json5/yaml)
356+
{
357+
test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
358+
type: 'javascript/auto',
359+
defaultSFCLang: 'yml',
360+
/* other options */,
361+
loader: '@intlify/vue-i18n-loader'
362+
},
363+
// for i18n custom block
364+
{
365+
resourceQuery: /blockType=i18n/,
366+
type: 'javascript/auto',
367+
loader: '@intlify/vue-i18n-loader'
368+
}
369+
// ...
370+
]
371+
}
372+
// ...
373+
}
374+
```
375+
376+
#### Use global format with rollup plugin (WIP)
377+
378+
```javascript
379+
plugins: [
380+
// set `customBlocks` opton to `rollup-plugin-vue`
381+
VuePlugin({ customBlocks: ['i18n'] }),
382+
// set `rollup-plugin-vue-i18n` after **`rollup-plugin-vue`**
383+
VueI18nPlugin({
384+
defaultSFCLang: 'yml',
385+
/* other options */
386+
}),
387+
/* other plugins */
388+
]
389+
```
390+
298391
## Define locale messages for global scope
299392

300393
You can use define locale messages for global scope with `global` attribute:
@@ -311,7 +404,102 @@ You can use define locale messages for global scope with `global` attribute:
311404

312405
In the above example, since the `global` attribute is set, the locale messages defined in `i18n` custom blocks can be merged as a resource for locale messages of global scope.
313406

407+
### Define global scope
408+
409+
If you are using one of `@intlify/vite-plugin-vue-i18n` plugin on your project, you can also define the `global` scope for all your `i18n` custom blocks on all your SFC using the `globalSFCScope` option.
410+
314411
:::warning NOTICE
412+
`@intlify/vue-i18n-loader` and `@intlify/rollup-plugin-vue-i18n` are currently in progress to add this feature.
413+
:::
414+
415+
**Warning**: beware enabling `globalSFCScope: true`, all `i18n` custom blocks in all your `SFC` will be on `global` scope.
416+
417+
For example, in order to configure `global` scope on all your `i18n` custom blocks on all your SFC:
418+
419+
```html
420+
<!-- custom block equivalent to &lt;i18n lang="yml" global> -->
421+
<i18n lang="yml">
422+
en:
423+
hello: Hello
424+
es:
425+
hello: Hola
426+
</i18n>
427+
```
428+
429+
or
430+
431+
```html
432+
<!-- custom block equivalent to &lt;i18n src="./locales/myMessages.json" global> -->
433+
<i18n src="./locales/myMessages.json5">
434+
</i18n>
435+
```
436+
437+
just configure `globalSFCScope: true` on your plugin configuration:
438+
439+
#### Use global format with vite plugin
440+
441+
```javascript
442+
import vue from '@vitejs/plugin-vue'
443+
import vueI18n from '@intlify/vite-plugin-vue-i18n'
444+
445+
plugins: [
446+
vue(),
447+
vueI18n({
448+
globalSFCScope: true,
449+
/* other options */
450+
})
451+
]
452+
```
453+
454+
#### Use global format with webpack plugin (WIP)
455+
456+
```javascript
457+
module.exports = {
458+
// ...
459+
module: {
460+
rules: [
461+
{
462+
test: /\.vue$/,
463+
loader: 'vue-loader',
464+
},
465+
// for i18n resources (json/json5/yaml)
466+
{
467+
test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
468+
type: 'javascript/auto',
469+
globalSFCScope: true,
470+
/* other options */,
471+
loader: '@intlify/vue-i18n-loader'
472+
},
473+
// for i18n custom block
474+
{
475+
resourceQuery: /blockType=i18n/,
476+
type: 'javascript/auto',
477+
loader: '@intlify/vue-i18n-loader'
478+
}
479+
// ...
480+
]
481+
}
482+
// ...
483+
}
484+
```
485+
486+
#### Use global format with rollup plugin (WIP)
487+
488+
```javascript
489+
plugins: [
490+
// set `customBlocks` opton to `rollup-plugin-vue`
491+
VuePlugin({ customBlocks: ['i18n'] }),
492+
// set `rollup-plugin-vue-i18n` after **`rollup-plugin-vue`**
493+
VueI18nPlugin({
494+
globalSFCScope: true,
495+
/* other options */
496+
}),
497+
/* other plugins */
498+
]
499+
```
500+
501+
502+
:::warn NOTICE
315503
The locale messages for global scope defined in i18n custom blocks are available **only composition API mode**. You need to run `useI18n` option to `useScope: 'global'` at `setup`. About details, see the [Composition API](./composition).
316504
:::
317505

0 commit comments

Comments
 (0)