@@ -130,44 +130,41 @@ To learn more, see [i18n.json configuration](/cli/fundamentals/i18n-json-config)
1301301 . Create an i18n configuration file (` src/i18n.js ` ):
131131
132132 ``` javascript
133- import { createI18n } from ' vue-i18n' ;
133+ import { createI18n } from " vue-i18n" ;
134134
135135 // It only imports 5 specific locales
136- import en from ' ./locales/en.json' ;
137- import es from ' ./locales/es.json' ;
138- import fr from ' ./locales/fr.json' ;
139- import de from ' ./locales/de.json' ;
140- import ja from ' ./locales/ja.json' ;
136+ import en from " ./locales/en.json" ;
137+ import es from " ./locales/es.json" ;
138+ import fr from " ./locales/fr.json" ;
139+ import de from " ./locales/de.json" ;
140+ import ja from " ./locales/ja.json" ;
141141
142142 const messages = {
143143 en,
144144 es,
145145 fr,
146146 de,
147- ja
147+ ja,
148148 };
149149
150150 // Create i18n instance
151151 export default createI18n ({
152152 legacy: false , // you must set this to `false` to use Composition API
153- locale: ' en ' , // set locale
154- fallbackLocale: ' en ' , // set fallback locale
153+ locale: " en " , // set locale
154+ fallbackLocale: " en " , // set fallback locale
155155 messages, // set locale messages
156156 });
157157 ```
158158
1591592 . Update your main.js file to use i18n:
160160
161161 ``` javascript
162- import { createApp } from ' vue' ;
163- import App from ' ./App.vue' ;
164- import router from ' ./router' ;
165- import i18n from ' ./i18n' ;
166-
167- createApp (App)
168- .use (router)
169- .use (i18n)
170- .mount (' #app' );
162+ import { createApp } from " vue" ;
163+ import App from " ./App.vue" ;
164+ import router from " ./router" ;
165+ import i18n from " ./i18n" ;
166+
167+ createApp (App).use (router).use (i18n).mount (" #app" );
171168 ```
172169
173170## Step 6. Implement language switching in your Vue components
@@ -178,9 +175,9 @@ To learn more, see [i18n.json configuration](/cli/fundamentals/i18n-json-config)
178175 <template>
179176 <div class="language-switcher">
180177 <label for="language-select">Language:</label>
181- <select
178+ <select
182179 id="language-select"
183- v-model="currentLocale"
180+ v-model="currentLocale"
184181 @change="changeLocale"
185182 >
186183 <option value="en">English</option>
@@ -193,11 +190,11 @@ To learn more, see [i18n.json configuration](/cli/fundamentals/i18n-json-config)
193190 </template>
194191
195192 <script>
196- import { ref, watch } from ' vue' ;
197- import { useI18n } from ' vue-i18n' ;
193+ import { ref, watch } from " vue" ;
194+ import { useI18n } from " vue-i18n" ;
198195
199196 export default {
200- name: ' LanguageSwitcher' ,
197+ name: " LanguageSwitcher" ,
201198 setup() {
202199 const { locale } = useI18n();
203200 const currentLocale = ref(locale.value);
@@ -212,9 +209,9 @@ To learn more, see [i18n.json configuration](/cli/fundamentals/i18n-json-config)
212209
213210 return {
214211 currentLocale,
215- changeLocale
212+ changeLocale,
216213 };
217- }
214+ },
218215 };
219216 </script>
220217
@@ -241,9 +238,9 @@ To learn more, see [i18n.json configuration](/cli/fundamentals/i18n-json-config)
241238 <template>
242239 <div id="app">
243240 <header>
244- <h1>{{ $t(' welcome' ) }}</h1>
245- <p>{{ $t(' description' ) }}</p>
246- <p>{{ $t(' greeting' , { name: ' Vue.js' }) }}</p>
241+ <h1>{{ $t(" welcome" ) }}</h1>
242+ <p>{{ $t(" description" ) }}</p>
243+ <p>{{ $t(" greeting" , { name: " Vue.js" }) }}</p>
247244 <LanguageSwitcher />
248245 <Counter />
249246 </header>
@@ -252,15 +249,15 @@ To learn more, see [i18n.json configuration](/cli/fundamentals/i18n-json-config)
252249 </template>
253250
254251 <script>
255- import LanguageSwitcher from ' ./components/LanguageSwitcher.vue' ;
256- import Counter from ' ./components/Counter.vue' ;
252+ import LanguageSwitcher from " ./components/LanguageSwitcher.vue" ;
253+ import Counter from " ./components/Counter.vue" ;
257254
258255 export default {
259- name: ' App' ,
256+ name: " App" ,
260257 components: {
261258 LanguageSwitcher,
262- Counter
263- }
259+ Counter,
260+ },
264261 };
265262 </script>
266263
@@ -279,28 +276,28 @@ To learn more, see [i18n.json configuration](/cli/fundamentals/i18n-json-config)
279276 ``` vue
280277 <template>
281278 <div class="counter">
282- <p>{{ $t(' counter' , { count }) }}</p>
279+ <p>{{ $t(" counter" , { count }) }}</p>
283280 <button @click="increment">+</button>
284281 </div>
285282 </template>
286283
287284 <script>
288- import { ref } from ' vue' ;
285+ import { ref } from " vue" ;
289286
290287 export default {
291- name: ' Counter' ,
288+ name: " Counter" ,
292289 setup() {
293290 const count = ref(0);
294-
291+
295292 const increment = () => {
296293 count.value++;
297294 };
298-
295+
299296 return {
300297 count,
301- increment
298+ increment,
302299 };
303- }
300+ },
304301 };
305302 </script>
306303
0 commit comments