You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Since `vue-i18n@v9.x`, the locale messages are handled with message compiler, which converts them to javascript functions after compiling. After compiling, message compiler converts them into javascript functions, which can improve the performance of the application.
64
+
65
+
However, with the message compiler, the javascript function conversion will not work in some environments (e.g. CSP). For this reason, `vue-i18n@v9.x` and later offer a full version that includes compiler and runtime, and a runtime only version.
66
+
67
+
If you are using the runtime version, you will need to compile before importing locale messages by managing them in a file such as `.json`.
68
+
69
+
70
+
### i18n custom block
71
+
72
+
The below example that `examples/vite/src/App.vue` have `i18n` custom block:
73
+
74
+
```vue
75
+
<template>
76
+
<form>
77
+
<label>{{ t('language') }}</label>
78
+
<select v-model="locale">
79
+
<option value="en">en</option>
80
+
<option value="ja">ja</option>
81
+
</select>
82
+
</form>
83
+
<p>{{ t('hello') }}</p>
84
+
<Banana />
85
+
</template>
86
+
87
+
<script>
88
+
import { useI18n } from 'vue-i18n'
89
+
import Banana from './Banana.vue'
90
+
91
+
export default {
92
+
name: 'App',
93
+
components: {
94
+
Banana
95
+
},
96
+
setup() {
97
+
const { t, locale } = useI18n({
98
+
inheritLocale: true,
99
+
useScope: 'local'
100
+
})
101
+
return { t, locale }
102
+
}
103
+
}
104
+
</script>
105
+
106
+
<i18n>
107
+
{
108
+
"en": {
109
+
"language": "Language",
110
+
"hello": "hello, world!"
111
+
},
112
+
"ja": {
113
+
"language": "言語",
114
+
"hello": "こんにちは、世界！"
115
+
}
116
+
}
117
+
</i18n>
118
+
```
119
+
120
+
### Locale Messages formatting
121
+
122
+
You can be used by specifying the following format in the `lang` attribute:
123
+
124
+
- json (default)
125
+
- yaml
126
+
- yml
127
+
- json5
128
+
129
+
example `yaml` format:
130
+
131
+
```vue
132
+
<i18n lang="yaml">
133
+
en:
134
+
hello: 'Hello World!'
135
+
ja:
136
+
hello: 'こんにちは、世界！'
137
+
</i18n>
138
+
```
139
+
140
+
### Static bundle importing
141
+
142
+
unplugin-vue-i18n allows you to statically bundle i18n resources such as `json` or `yaml` specified by the [`include` option](#include) of the plugin described below as locale messages with the `import` syntax.
143
+
144
+
In this case, only one i18n resource can be statically bundled at a time with `import` syntax, so the these code will be redundant for multiple locales.
145
+
146
+
```js
147
+
import { createApp } from'vue'
148
+
import { createI18n } from'vue-i18n'
149
+
/*
150
+
* The i18n resources in the path specified in the plugin `include` option can be read
151
+
* as vue-i18n optimized locale messages using the import syntax
152
+
*/
153
+
importenfrom'./src/locales/en.json'
154
+
importjafrom'./src/locales/ja.yaml'
155
+
importfrfrom'./src/locales/fr.json5'
156
+
157
+
consti18n=createI18n({
158
+
locale:'en',
159
+
messages: {
160
+
en,
161
+
ja,
162
+
fr
163
+
}
164
+
})
165
+
166
+
constapp=createApp()
167
+
app.use(i18n).mount('#app')
168
+
```
169
+
170
+
unplugin-vue-i18n can use the bundler virtual mechanism to import all locales at once, using the special identifier `@intlify/unplugin-vue-i18n/messages`, as the bellow:
171
+
172
+
```js
173
+
import { createApp } from'vue'
174
+
import { createI18n } from'vue-i18n'
175
+
/*
176
+
* All i18n resources specified in the plugin `include` option can be loaded
If you want type definition of `@intlify/unplugin-vue-i18n/messages`, add `unplugin-vue-i18n/messages` to `compilerOptions.types` of your tsconfig:
193
+
194
+
```json
195
+
{
196
+
"compilerOptions": {
197
+
"types": ["@intlify/unplugin-vue-i18n/messages"]
198
+
}
199
+
}
200
+
```
59
201
60
202
## 🔧 Options
61
203
@@ -73,7 +215,7 @@ module.exports = {
73
215
- yml
74
216
```
75
217
76
-
Note `json` resources matches this option, it will be handled **before the internal json plugin of Vite, and will not be processed afterwards**, else the option doesn't match, the Vite side will handle.
218
+
Note `json` resources matches this option, it will be handled **before the internal json plugin of bundler, and will not be processed afterwards**, else the option doesn't match, the bundler side will handle.
0 commit comments