vue_i18n_quickstart_with_locale_messages_and_fallback.ts

1import { createApp } from 'vue'
2import { createI18n } from 'vue-i18n'
3
4// 1. Ready translated locale messages
5// The structure of the messages dataset is a nested object of string keys
6const messages = {
7  en: {
8    message: {
9      hello: 'hello world'
10    }
11  },
12  ja: {
13    message: {
14      hello: 'こんにちは、世界'
15    }
16  }
17}
18
19// 2. Create i18n instance with options
20const i18n = createI18n({
21  locale: 'ja', // set locale
22  fallbackLocale: 'en', // set fallback locale
23  messages, // set locale messages
24  // If you want to use Composition API, set to false
25  legacy: false, 
26})
27
28// 3. Create a vue root instance
29const app = createApp({
30  // setup is optional, but common in TypeScript/Composition API usage
31  setup() {
32    // values can be accessed via template or script
33    return {}
34  }
35})
36
37// 4. Install i18n instance to make the whole app aware of i18n
38app.use(i18n)
39
40// 5. Mount
41app.mount('#app')