Vue I18n

https://vue-i18n.intlify.dev/
Admin
Vue I18n is an easy, powerful, and component-oriented internationalization plugin for Vue.js,...
Tokens:64,036
Snippets:816
Trust Score:7.9
Update:3 months ago
Show doc for...
Tokens:
Raw
### install(app, options)

Source: https://vue-i18n.intlify.dev/api/general

The entry point for installing the I18n plugin into a Vue application.

```APIDOC
## install(app, options)

### Description
Install entry point for the Vue plugin.

### Signature
`install(app: App, ...options: unknown[]): void;`

### Parameters
- **app** (App) - Required - A target Vue app instance
- **options** (unknown[]) - Optional - An install options
```

--------------------------------

### Use tm in script

Source: https://vue-i18n.intlify.dev/api/composition

Example of setting up tm and rt within a Vue component setup function.

```js
import { defineComponent } from 'vue
import { useI18n } from 'vue-i18n'

export default defineComponent({
  setup() {
    const { rt, tm } = useI18n({
      messages: {
        en: {
          contents: [
            {
              title: 'Title1',
              // ...
              paragraphs: [
                // ...
              ]
            }
          ]
        }
      }
      // ...
    })
    // ...
    return { ... , rt, tm }
  }
})
```

--------------------------------

### CDN Installation

Source: https://vue-i18n.intlify.dev/guide/advanced/lite

Include the Vue and petite-vue-i18n scripts in the document head.

```html
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/petite-vue-i18n"></script>
```

--------------------------------

### Install @intlify/core-base

Source: https://vue-i18n.intlify.dev/guide/advanced/lite

Commands to install the core-base package required for advanced message resolution.

```sh
npm install --save @intlify/core-base@next
```

```sh
yarn add @intlify/core-base@next
```

```sh
pnpm add @intlify/core-base@next
```

--------------------------------

### Install vue-i18n-loader

Source: https://vue-i18n.intlify.dev/guide/advanced/sfc

Install the loader required for Quasar CLI projects.

```sh
npm install @intlify/vue-i18n-loader -D
```

```sh
yarn add @intlify/vue-i18n-loader -D
```

```sh
pnpm add -D @intlify/vue-i18n-loader
```

--------------------------------

### Use useI18n in script setup

Source: https://vue-i18n.intlify.dev/guide/migration/vue3

Access translation functions within the <script setup> block.

```vue
<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n() // use as global scope
</script>

<template>
  <p>{{ $t('hello') }}</p>
  <p>{{ t('hello') }}</p>
</template>
```

--------------------------------

### Install Vue plugin

Source: https://vue-i18n.intlify.dev/api/general

Entry point for installing the I18n instance into a Vue application.

```typescript
install(app: App, ...options: unknown[]): void;
```

--------------------------------

### Package Manager Installation

Source: https://vue-i18n.intlify.dev/guide/advanced/lite

Install the petite-vue-i18n package using npm, yarn, or pnpm.

```sh
npm install petite-vue-i18n@next --save
```

```sh
yarn add petite-vue-i18n@next
```

```sh
pnpm add petite-vue-i18n@next
```

--------------------------------

### Implement Component Resource Localization

Source: https://vue-i18n.intlify.dev/api/composition

Example of using useI18n within a Vue component setup function to manage local messages and locale state.

```html
<template>
  <form>
    <label>{{ t('language') }}</label>
    <select v-model="locale">
      <option value="en">en</option>
      <option value="ja">ja</option>
    </select>
  </form>
  <p>message: {{ t('hello') }}</p>
</template>

<script>
import { useI18n } from 'vue-i18n'

export default {
 setup() {
   const { t, locale } = useI18n({
     locale: 'ja',
     messages: {
       en: { ... },
       ja: { ... }
     }
   })
   // Something to do ...

   return { ..., t, locale }
 }
}
</script>
```

--------------------------------

### Run Nuxt 3 Development Server

Source: https://vue-i18n.intlify.dev/guide/integrations/nuxt3

Commands to start the development server.

```sh
npm run dev
```

```sh
yarn dev
```

```sh
pnpm dev
```

--------------------------------

### Use Composition API with vue-i18n-bridge

Source: https://vue-i18n.intlify.dev/guide/migration/vue2

Setup examples for using the Composition API with the bridge in Vue 2.7 and 2.6 environments.

```js
import Vue from 'vue'
import { createApp } from 'vue-demi'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueI18n, { bridge: true }) // you must specify '{ bridge: true }' plugin option when install vue-i18n

// `createI18n` options is almost same vue-i18n (vue-i18n@v9.x) API
const i18n = createI18n({
  legacy: false,
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `createI18n` which is provide `vue-i18n-bridge` has second argument, you **must** pass `VueI18n` constructor which is provide `vue-i18n`

const app = createApp({
 setup() {
   // `useI18n` options is almost same vue-i18n (vue-i18n@v9.x) API
   const { t, locale } = useI18n()
   // ... todo something

   return { t, locale }
 }
})

app.use(i18n) // you must install `i18n` instance which is created by `createI18n`
app.mount('#app')
```

```js
import Vue from 'vue'
import VueCompositionAPI, { createApp } from '@vue/composition-api'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true }) // you must specify '{ bridge: true }' plugin option when install vue-i18n

// `createI18n` options is almost same vue-i18n (vue-i18n@v9.x) API
const i18n = createI18n({
  legacy: false,
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `createI18n` which is provide `vue-i18n-bridge` has second argument, you **must** pass `VueI18n` constructor which is provide `vue-i18n`

const app = createApp({
 setup() {
   // `useI18n` options is almost same vue-i18n (vue-i18n@v9.x) API
   const { t, locale } = useI18n()
   // ... todo something

   return { t, locale }
 }
})

app.use(i18n) // you must install `i18n` instance which is created by `createI18n`
app.mount('#app')
```

--------------------------------

### Basic Hello World Implementation

Source: https://vue-i18n.intlify.dev/guide/advanced/lite

Standard setup for petite-vue-i18n using a template and a basic i18n instance.

```html
<div id="app">
  <h1>{{ t('hello world') }}</h1>
</div>
```

```js
const { createApp } = Vue
const { createI18n, useI18n } = PetiteVueI18n
// or for ES modules
// import { createApp } from 'vue'
// import { createI18n } from 'petite-vue-i18n'

const i18n = createI18n({
  locale: 'en',
  messages: {
    en: {
      'hello world': 'Hello world!'
    },
    ja: {
      'hello world': 'こんにちは、世界！'
    }
  }
})

// define App component
const App = {
  setup() {
    const { t } = useI18n()
    return { t }
  }
}

const app = createApp(App)

app.use(i18n)
app.mount('#app')
```

--------------------------------

### Use Legacy API with vue-i18n-bridge

Source: https://vue-i18n.intlify.dev/guide/migration/vue2

Setup example for using the legacy API with the bridge in Vue 2.7.

```js
import Vue from 'vue'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueI18n, { bridge: true }) // you must specify '{ bridge: true }' plugin option when install vue-i18n

// `createI18n` options is almost same vue-i18n (vue-i18n@v9.x) API
const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `createI18n` which is provide `vue-i18n-bridge` has second argument, you **must** pass `VueI18n` constructor which is provide `vue-i18n`

Vue.use(i18n) // you must install `i18n` instance which is created by `createI18n`

const app = new Vue({ i18n })
app.$mount('#app')
```

--------------------------------

### Install unplugin-vue-i18n

Source: https://vue-i18n.intlify.dev/guide/advanced/sfc

Install the required bundler plugin for Vite or Webpack.

```sh
npm install @intlify/unplugin-vue-i18n -D
```

```sh
yarn add @intlify/unplugin-vue-i18n -D
```

```sh
pnpm add -D @intlify/unplugin-vue-i18n
```

--------------------------------

### Component Template Example

Source: https://vue-i18n.intlify.dev/guide/essentials/local

Example template structure for a root component utilizing local scope localization.

```html
<div id="app">
  <h1>Root</h1>
  <p>{{ $t("message.hello") }}</p>
  <Component1 />
</div>
```

--------------------------------

### Use useI18n in setup option

Source: https://vue-i18n.intlify.dev/guide/migration/vue3

Access translation functions within the setup option of a Vue component.

```vue
<script>
import { defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  name: 'Hello',
  setup() {
    const { t } = useI18n() // use as global scope
    return { t }
  }
})
</script>

<template>
  <p>{{ $t('hello') }}</p>
  <p>{{ t('hello') }}</p>
</template>
```

--------------------------------

### Translation Component Usage

Source: https://vue-i18n.intlify.dev/api/component

Example of using the Translation component in a Vue template and setup.

```html
<div id="app">
  <!-- ... -->
  <i18n keypath="term" tag="label" for="tos">
    <a :href="url" target="_blank">{{ $t('tos') }}</a>
  </i18n>
  <!-- ... -->
</div>
```

```js
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const messages = {
  en: {
    tos: 'Term of Service',
    term: 'I accept xxx {0}.'
  },
  ja: {
    tos: '利用規約',
    term: '私は xxx の{0}に同意します。'
  }
}

const i18n = createI18n({
  locale: 'en',
  messages
})

const app = createApp({
  data: {
    url: '/term'
  }
}).use(i18n).mount('#app')
```

--------------------------------

### Initialize Vue I18n

Source: https://vue-i18n.intlify.dev/api/general

Examples for initializing Vue I18n using either the Legacy API or the Composition API.

```javascript
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

// call with I18n option
const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: { ... },
    ja: { ... }
  }
})

const App = {
  // ...
}

const app = createApp(App)

// install!
app.use(i18n)
app.mount('#app')
```

```javascript
import { createApp } from 'vue'
import { createI18n, useI18n } from 'vue-i18n'

// call with I18n option
const i18n = createI18n({
  legacy: false, // you must specify 'legacy: false' option
  locale: 'ja',
  messages: {
    en: { ... },
    ja: { ... }
  }
})

const App = {
  setup() {
    // ...
    const { t } = useI18n({ ... })
    return { ... , t }
  }
}

const app = createApp(App)

// install!
app.use(i18n)
app.mount('#app')
```

--------------------------------

### Implement Custom Message Resolver

Source: https://vue-i18n.intlify.dev/api/composition

Example of setting up a custom message resolver within the createI18n configuration.

```javascript
import { createI18n } from 'vue-i18n'

// your message resolver
function messageResolver(obj, path) {
  // simple message resolving!
  const msg = obj[path]
  return msg != null ? msg : null
}

// call with I18n option
const i18n = createI18n({
  legacy: false,
  locale: 'ja',
  messageResolver, // set your message resolver
  messages: {
    en: { ... },
    ja: { ... }
  }
})

// the below your something to do ...
// ...
```

--------------------------------

### Message Format Syntax Example

Source: https://vue-i18n.intlify.dev/guide/migration/breaking

Example of a complex message format string using special characters.

```text
@.caml:{'no apples'} | {0} apple | {n}　apples
```

--------------------------------

### Rendered output example

Source: https://vue-i18n.intlify.dev/guide/advanced/composition

The resulting HTML output after translation processing.

```vue
<div id="app">
  <h1>こんにちは、世界</h1>
</div>
```

--------------------------------

### Install Vue I18n via package managers

Source: https://vue-i18n.intlify.dev/guide/installation

Commands to install the latest version of Vue I18n using common package managers.

```sh
npm install vue-i18n@11
```

```sh
yarn add vue-i18n@11
```

```sh
pnpm add vue-i18n@11
```

--------------------------------

### Basic HTML Localization Example

Source: https://vue-i18n.intlify.dev/guide/advanced/component

Demonstrates the cumbersome approach of splitting messages into multiple keys versus using the i18n-t component.

```html
<p>I accept xxx <a href="/term">Terms of Service Agreement</a></p>
```

```javascript
const messages = {
  en: {
    term1: 'I Accept xxx\'s',
    term2: 'Terms of Service Agreement'
  }
}
```

```html
<p>{{ $t('term1') }}<a href="/term">{{ $t('term2') }}</a></p>
```

```html
<p>I accept xxx <a href="/term">Terms of Service Agreement</a></p>
```

--------------------------------

### Localization Output Example

Source: https://vue-i18n.intlify.dev/guide/essentials/local

The rendered HTML output demonstrating local and global message resolution.

```html
<div id="app">
  <h1>Root</h1>
  <p>こんにちは、世界</p>
  <div class="component">
    <p>Component1 locale messages: こんにちは、component1</p>
    <p>Fallback global locale messages: おはよう、世界！</p>
  </div>
</div>
```

--------------------------------

### DefineCoreLocaleMessage Usage Example

Source: https://vue-i18n.intlify.dev/api/general

Example of extending the DefineCoreLocaleMessage interface in a declaration file.

```typescript
// type.d.ts (`.d.ts` file at your app)
import { DefineCoreLocaleMessage } from '@intlify/core-base'

declare module '@intlify/core-base' {
  export interface DefineCoreLocaleMessage {
    title: string
    menu: {
      login: string
    }
  }
}
```

--------------------------------

### Install Vue I18n Dependency

Source: https://vue-i18n.intlify.dev/guide/integrations/nuxt3

Commands to add vue-i18n as a development dependency.

```sh
npm install vue-i18n -D
```

```sh
yarn add vue-i18n -D
```

```sh
pnpm add -D vue-i18n
```

--------------------------------

### Register the i18n plugin

Source: https://vue-i18n.intlify.dev/guide/essentials/started

Install the i18n instance into the Vue application before mounting.

```js
const app = createApp(Vue)
app.use(i18n)
app.mount('#app')
```

--------------------------------

### Implement Custom Message Compiler

Source: https://vue-i18n.intlify.dev/api/composition

Example of integrating a custom message compiler using intl-messageformat.

```javascript
import { createI18n } from 'vue-i18n'
import IntlMessageFormat from 'intl-messageformat'

function messageCompiler(message, { locale, key, onError }) {
  if (typeof message === 'string') {
    // You can tune your message compiler performance more with your cache strategy or also memoization at here
    const formatter = new IntlMessageFormat(message, locale)
    return ctx => formatter.format(ctx.values)
  } else {
    // If you would like to support it for AST,
    // You need to transform locale mesages such as `json`, `yaml`, etc. with the bundle plugin.
    onError && onError(new Error('not support for AST'))
    return () => key // return default with `key`
  }
}

// call with I18n option
const i18n = createI18n({
  legacy: false,
  locale: 'ja',
  messageCompiler, // set your message compiler
  messages: {
    en: {
      hello: 'hello world!',
      greeting: 'hi, {name}!',
      // ICU Message format
      photo: `You have {numPhotos, plural,
        =0 {no photos.}
        =1 {one photo.}
        other {# photos.}
      }`
    },
  }
})

// the below your something to do ...
// ...
```

--------------------------------

### Use v-t Directive Syntax

Source: https://vue-i18n.intlify.dev/api/directive

Examples of using the v-t directive with string and object syntax for localization.

```html
<!-- string syntax: literal -->
<p v-t="'foo.bar'"></p>

<!-- string syntax: binding via data or computed props -->
<p v-t="msg"></p>

<!-- object syntax: literal -->
<p v-t="{ path: 'hi', locale: 'ja', args: { name: 'kazupon' } }"></p>

<!-- object syntax: binding via data or computed props -->
<p v-t="{ path: greeting, args: { name: fullName } }"></p>
```

--------------------------------

### Initialize Global Vue I18n Instance

Source: https://vue-i18n.intlify.dev/guide/essentials/scope

Create a global i18n instance using createI18n and install it into the Vue application.

```javascript
const i18n = createI18n({
  locale: 'ja', // set current locale
  messages: {
    en: {
      hello: 'hello!'
    },
    ja: {
      hello: 'こんにちは！'
    }
  },
  // vue-i18n something options here ...
  // ...
})

// create Vue app instance, install Vue I18n, and mount!
createApp({
  // something vue options here ...
  // ...
}).use(i18n).mount('#app')
```

--------------------------------

### Define i18n setup and dynamic loading functions

Source: https://vue-i18n.intlify.dev/guide/advanced/lazy

Defines the setupI18n, setI18nLanguage, and loadLocaleMessages functions to manage locale state and dynamic file loading.

```javascript
import { nextTick } from 'vue'
import { createI18n } from 'vue-i18n'

export const SUPPORT_LOCALES = ['en', 'ja']

export function setupI18n(options = { locale: 'en' }) {
  const i18n = createI18n(options)
  setI18nLanguage(i18n, options.locale)
  return i18n
}

export function setI18nLanguage(i18n, locale) {
  if (i18n.mode === 'legacy') {
    i18n.global.locale = locale
  } else {
    i18n.global.locale.value = locale
  }
  /**
   * NOTE:
   * If you need to specify the language setting for headers, such as the `fetch` API, set it here.
   * The following is an example for axios.
   *
   * axios.defaults.headers.common['Accept-Language'] = locale
   */
  document.querySelector('html').setAttribute('lang', locale)
}

export async function loadLocaleMessages(i18n, locale) {
  // load locale messages with dynamic import
  const messages = await import(
    /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
  )

  // set locale and locale message
  i18n.global.setLocaleMessage(locale, messages.default)

  return nextTick()
}
```

--------------------------------

### Configure globalInstall option

Source: https://vue-i18n.intlify.dev/api/general

Determines if Vue I18n components are registered globally during plugin installation.

```typescript
globalInstall?: boolean;
```

--------------------------------

### Example of list resolution

Source: https://vue-i18n.intlify.dev/api/general

Implementation of list resolution within a message definition.

```js
const messages = {
  en: {
    greeting: ({ list }) => `hello, ${list(0)}!`
  }
}
```

--------------------------------

### Configure Vue I18n for String Syntax

Source: https://vue-i18n.intlify.dev/guide/advanced/directive

Setup the i18n instance and Vue application to support string-based keypath translation.

```js
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'en',
  messages: {
    en: { hello: 'hi there!' },
    ja: { hello: 'こんにちは！' }
  }
})

const app = createApp({
  data: () => ({ path: 'hello' })
})
app.use(i18n)
app.mount('#app')
```

--------------------------------

### Install vue-i18n-bridge via package manager

Source: https://vue-i18n.intlify.dev/guide/migration/vue2

Commands to add the bridge package to your project using common package managers.

```sh
npm install vue-i18n-bridge
```

```sh
yarn add vue-i18n-bridge
```

```sh
pnpm add vue-i18n-bridge
```

--------------------------------

### Define Type-safe Resources in useI18n

Source: https://vue-i18n.intlify.dev/guide/advanced/typescript

Example of using template syntax with type-safe resource keys in a Vue component.

```html
<template>
  <p>message: {{ t('messages.hello', { name: 'kazupon' }) }}</p>
  <p>currency: {{ n(1000, 'currency') }}</p>
</template>
```

--------------------------------

### Define Messages for Fallback

Source: https://vue-i18n.intlify.dev/guide/essentials/fallback

Example messages object where 'hello' is defined in English but missing in Japanese.

```javascript
const messages = {
  en: {
    hello: 'Hello, world!'
  },
  ja: {
  }
}
```

--------------------------------

### Define I18nPluginOptions interface

Source: https://vue-i18n.intlify.dev/api/general

Interface for options used when installing Vue I18n via app.use.

```typescript
export interface I18nPluginOptions
```

--------------------------------

### TypeScript Compilation Error Example

Source: https://vue-i18n.intlify.dev/guide/advanced/typescript

Example of a TypeScript error output when a required locale resource is missing from the configuration.

```sh
$ npx tsc
npx tsc
src/main.ts:11:3 - error TS2741: Property '"ja-JP"' is missing in type '{ 'en-US': { world: string; }; }' but required in type '{ "en-US": { world: string; }; "ja-JP": { world: string; }; }'.

11   messages: {
     ~~~~~~~~

  node_modules/vue-i18n/dist/vue-i18n.d.ts:712:5
    712     messages?: {
            ~~~~~~~~
    The expected type comes from property 'messages' which is declared here on type 'I18nOptions<{ message: { world: string; }; datetime: DateTimeFormat; number: NumberFormat; }, { messages: "en-US"; datetimeFormats: "en-US"; numberFormats: "en-US"; } | { ...; }, ComposerOptions<...> | VueI18nOptions<...>>'


Found 1 error.
```

--------------------------------

### Configure Vue I18n for Object Syntax

Source: https://vue-i18n.intlify.dev/guide/advanced/directive

Setup the i18n instance with complex messages including arguments and pluralization.

```js
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hi: 'Hi, {name}!',
        bye: 'good bye!',
        apple: 'no apples | one apple | {count} apples'
      }
    },
    ja: {
      message: {
        hi: 'こんにちは、 {name}！',
        bye: 'さようなら！',
        apple: 'リンゴはありません | 一つのりんご | {count} りんご'
      }
    }
  }
})

const app = createApp({
  data() {
    return {
      byePath: 'message.bye',
      appleCount: 7,
    }
  }
})
app.use(i18n)
app.mount('#object-syntax')
```

--------------------------------

### Import Vue I18n via CDN

Source: https://vue-i18n.intlify.dev/guide/installation

Examples for including Vue I18n in browser environments using global scripts or ES modules.

```html
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-i18n@11"></script>
```

```html
<script type="module" src="https://unpkg.com/vue@3/dist/vue.esm-browser.js">
<script type="module" src="https://unpkg.com/vue-i18n@11/dist/vue-i18n.esm-browser.js">
```

--------------------------------

### Define Global Scope Template

Source: https://vue-i18n.intlify.dev/guide/advanced/composition

A basic template example demonstrating the use of the t function within the global scope.

```html
<template>
  <h1>{{ t('title') }}</h1>
  <p>{{ status }}</p>
</template>
```

--------------------------------

### Configure unplugin-vue-i18n for Vite

Source: https://vue-i18n.intlify.dev/guide/advanced/optimization

Setup the plugin in vite.config.ts to handle locale message pre-compilation.

```js
// vite.config.ts
import { defineConfig } from 'vite'
import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'url'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'

export default defineConfig({
  /* ... */
  plugins: [
    /* ... */
    VueI18nPlugin({
      /* options */
      // locale messages resource pre-compile option
      include: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
    }),
  ],
})
```

--------------------------------

### Configure vue-i18n-bridge for Vue 2.6

Source: https://vue-i18n.intlify.dev/guide/migration/vue2

Setup for Vue 2.6 using the Composition API and bridge plugin options.

```javascript
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true }) // you must specify '{ bridge: true }' plugin option when install vue-i18n

// `createI18n` options is almost same vue-i18n (vue-i18n@v9.x) API
const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `createI18n` which is provide `vue-i18n-bridge` has second argument, you **must** pass `VueI18n` constructor which is provide `vue-i18n`

Vue.use(i18n) // you must install `i18n` instance which is created by `createI18n`

const app = new Vue({ i18n })
app.$mount('#app')
```

--------------------------------

### Example of plural resolution

Source: https://vue-i18n.intlify.dev/api/general

Implementation of plural resolution within a message definition.

```js
const messages = {
  en: {
    car: ({ plural }) => plural(['car', 'cars']),
    apple: ({ plural, named }) =>
      plural([
        'no apples',
        'one apple',
        `${named('count')} apples`
      ])
  }
}
```

--------------------------------

### Example of named resolution

Source: https://vue-i18n.intlify.dev/api/general

Implementation of named resolution within a message definition.

```js
const messages = {
  en: {
    greeting: ({ named }) => `hello, ${named('name')}!`
  }
}
```

--------------------------------

### Use tm in template

Source: https://vue-i18n.intlify.dev/api/composition

Example of iterating over retrieved locale messages in a Vue template.

```html
<div class="container">
  <template v-for="content in tm('contents')">
    <h2>{{ rt(content.title) }}</h2>
    <p v-for="paragraph in content.paragraphs">
     {{ rt(paragraph) }}
    </p>
  </template>
</div>
```

--------------------------------

### Usage of message values

Source: https://vue-i18n.intlify.dev/api/general

Examples showing how message values are passed in Vue templates and core translate functions.

```html
<p>{{ $t('greeting', { name: 'DIO' }) }}</p> <!-- `{ name: 'DIO' }` is message values -->
```

```js
translate(context, 'foo.bar', ['dio']) // `['dio']` is message values
```

--------------------------------

### Configure vue-i18n-bridge with TypeScript

Source: https://vue-i18n.intlify.dev/guide/migration/vue2

Setup for TypeScript environments requiring explicit casting of the i18n instance.

```typescript
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import { createI18n, useI18n, castToVueI18n } from 'vue-i18n-bridge'

Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true })

// you need to cast `i18n` instance
const i18n = castToVueI18n(createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n))

Vue.use(i18n)

const app = new Vue({ i18n })
app.$mount('#app')
```

--------------------------------

### Implement ICU Message Format compiler

Source: https://vue-i18n.intlify.dev/guide/advanced/format

An example implementation using intl-messageformat to handle ICU message syntax.

```ts
import IntlMessageFormat from 'intl-messageformat'

import type { MessageCompiler, CompileError, MessageContext } from 'vue-i18n'

export const messageCompiler: MessageCompiler = (
  message,
  { locale, key, onError }
) => {
  if (typeof message === 'string') {
    /**
     * You can tune your message compiler performance more with your cache strategy or also memoization at here
     */
    const formatter = new IntlMessageFormat(message, locale)
    return (ctx: MessageContext) => {
      return formatter.format(ctx.values)
    }
  } else {
    /**
     * for AST.
     * If you would like to support it,
     * You need to transform locale messages such as `json`, `yaml`, etc. with the bundle plugin.
     */
    onError && onError(new Error('not support for AST') as CompileError)
    return () => key
  }
}
```

--------------------------------

### I18n interface definition

Source: https://vue-i18n.intlify.dev/api/general

The primary instance interface required for Vue plugin installation.

```typescript
export interface I18n<Messages extends Record<string, unknown> = {}, DateTimeFormats extends Record<string, unknown> = {}, NumberFormats extends Record<string, unknown> = {}, OptionLocale = Locale, Legacy = boolean>
```

--------------------------------

### Configure Nuxt 3 with Vite Plugin

Source: https://vue-i18n.intlify.dev/guide/integrations/nuxt3

Setup the nuxt.config.ts file to include the Vue I18n Vite plugin and transpile the vue-i18n package.

```javascript
import { defineNuxtConfig } from 'nuxt'
import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'url'
import VueI18nVitePlugin from '@intlify/unplugin-vue-i18n/vite'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  build: { 
    transpile: ['vue-i18n'] 
  }, 
  vite: { 
    plugins: [ 
      VueI18nVitePlugin({ 
        include: [ 
          resolve(dirname(fileURLToPath(import.meta.url)), './locales/*.json') 
        ] 
      }) 
    ] 
  } 
})
```

--------------------------------

### Create Plugin Directory and File

Source: https://vue-i18n.intlify.dev/guide/integrations/nuxt3

Commands to prepare the plugins directory and the i18n plugin file.

```sh
mkdir plugins
```

```sh
touch plugins/i18n.ts
```

--------------------------------

### Application Initialization via CDN

Source: https://vue-i18n.intlify.dev/guide/advanced/lite

Initialize the application using the global Vue and PetiteVueI18n objects.

```html
<script>
const { createApp } = Vue
const { createI18n } = PetiteVueI18n

const i18n = createI18n({
  // something vue-i18n options here ...
})

const app = createApp({
  // something vue options here ...
})

app.use(i18n)
app.mount('#app')
</script>
```

--------------------------------

### Initialize Nuxt 3 Application

Source: https://vue-i18n.intlify.dev/guide/integrations/nuxt3

Commands to scaffold a new Nuxt 3 project.

```sh
npx nuxi init nuxt3-app-vue-i18n
```

```sh
pnpm dlx nuxi init nuxt3-app-vue-i18n
```

--------------------------------

### Create locale directory and files

Source: https://vue-i18n.intlify.dev/guide/integrations/nuxt3

Commands to initialize the directory structure and create JSON files for locale resources.

```sh
mkdir locales
```

```sh
touch locales/en.json # for english
touch locales/fr.json # for french
touch locales/ja.json # for japanese
```

--------------------------------

### Change Global Locale in Script Setup

Source: https://vue-i18n.intlify.dev/guide/advanced/composition

Use the locale property from the global useI18n instance to update the application locale.

```vue
<script setup>
const { t, locale } = useI18n({ useScope: 'global' })

locale.value = 'en' // change!
</script>
```

--------------------------------

### Project Directory Structure

Source: https://vue-i18n.intlify.dev/guide/integrations/nuxt3

The expected file structure after initializing the Nuxt 3 project.

```text
cd nuxt3-app-vue-i18n
tree -L 1
.
├── README.md
├── app.vue
├── nuxt.config.ts
├── package.json
└── tsconfig.json
```

--------------------------------

### Module-based Initialization

Source: https://vue-i18n.intlify.dev/guide/advanced/lite

Initialize the application using ES module imports.

```js
import { createApp } from 'vue'
import { createI18n } from 'petite-vue-i18n'

const i18n = createI18n({
  // something vue-i18n options here ...
})

const app = createApp({
  // something vue options here ...
})

app.use(i18n)
app.mount('#app')
```

--------------------------------

### Create an i18n instance

Source: https://vue-i18n.intlify.dev/guide/essentials/started

Initialize the i18n instance with locale settings and message resources.

```js
const i18n = createI18n({
  locale: 'ja',
  fallbackLocale: 'en',
  messages: {
    en: {
      message: {
        hello: 'hello world'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、世界'
      }
    }
  }
})
```

--------------------------------

### Initialize I18n with Number Formats

Source: https://vue-i18n.intlify.dev/guide/essentials/number

Register the defined number formats within the createI18n configuration.

```javascript
const i18n = createI18n({
  numberFormats
})
```

--------------------------------

### Use Translation in Component

Source: https://vue-i18n.intlify.dev/guide/integrations/nuxt3

Example of using the $t function within a Vue component template.

```vue
<template>
  <div>
   <NuxtWelcome />
   <h1>{{ $t('hello', { name: 'vue-i18n' }) }}</h1>
  </div>
</template>
```

--------------------------------

### Define useI18n Function Signature

Source: https://vue-i18n.intlify.dev/api/composition

The signature for the useI18n hook used within the setup function.

```typescript
export declare function useI18n<Schema = DefaultLocaleMessageSchema, Locales = 'en-US', Options extends UseI18nOptions<SchemaParams<Schema, VueMessageType>, LocaleParams<Locales>> = UseI18nOptions<SchemaParams<Schema, VueMessageType>, LocaleParams<Locales>>>(options?: Options): Composer<NonNullable<Options['messages']>, NonNullable<Options['datetimeFormats']>, NonNullable<Options['numberFormats']>, NonNullable<Options['locale']>>;
```

--------------------------------

### Configure I18n Instance

Source: https://vue-i18n.intlify.dev/guide/essentials/datetime

Register the datetime formats when initializing the I18n instance.

```javascript
const i18n = createI18n({
  datetimeFormats
})
```

--------------------------------

### Get API mode

Source: https://vue-i18n.intlify.dev/api/general

Returns the current API mode. Note that this property is deprecated and will be removed in v12.

```typescript
readonly mode: I18nMode;
```

--------------------------------

### Use String Syntax in Templates

Source: https://vue-i18n.intlify.dev/guide/advanced/directive

Apply the v-t directive using string literals or data-bound keypaths.

```html
<div id="string-syntax">
  <!-- string literal -->
  <p v-t="'hello'"></p>
  <!-- keypath binding via data -->
  <p v-t="path"></p>
</div>
```

```html
<div id="string-syntax">
  <p>hi there!</p>
  <p>hi there!</p>
</div>
```

--------------------------------

### Configure Vue I18n in a module system

Source: https://vue-i18n.intlify.dev/guide/installation

Initialize and register the I18n instance with the Vue application using app.use().

```js
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  // something vue-i18n options here ...
})

const app = createApp({
  // something vue options here ...
})

app.use(i18n)
app.mount('#app')
```

--------------------------------

### Migrate Instance Creation to createI18n

Source: https://vue-i18n.intlify.dev/guide/migration/breaking

Replaces the class-based 'new VueI18n' instantiation with the 'createI18n' function for Vue 3 compatibility.

```javascript
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
  // ...
})

new Vue({
  i18n,
  // ...
})
```

```javascript
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  // ...
})

const app = createApp({
  // ...
})
app.use(i18n)
```

--------------------------------

### Configure Vite Plugin

Source: https://vue-i18n.intlify.dev/guide/advanced/lite

Required configuration for the @intlify/unplugin-vue-i18n plugin when using petite-vue-i18n.

```diff
 // vite.config.ts
 import { defineConfig } from 'vite'
 import { resolve, dirname } from 'node:path'
 import { fileURLToPath } from 'url'
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'

 export default defineConfig({
   /* ... */
   plugins: [
     /* ... */
     VueI18nPlugin({
       /* options */
+      module: 'petite-vue-i18n',
       // locale messages resource pre-compile option
       include: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
     }),
   ],
 })
```

--------------------------------

### Configure createI18n with Type Hints

Source: https://vue-i18n.intlify.dev/guide/advanced/typescript

Use the second type parameter of createI18n to provide a type hint for options, enabling TypeScript checks for your i18n resource schema.

```typescript
import { createI18n, type I18nOptions } from 'vue-i18n'

/**
 * import locale messages resource from json for global scope
 */
import enUS from './locales/en-US.json'
import jaJP from './locales/ja-JP.json'

const options: I18nOptions = {
  legacy: false,
  locale: 'ja-JP',
  fallbackLocale: 'en-US',
  messages: {
    'en-US': enUS,
    'ja-JP': jaJP
  },
  datetimeFormats: {
    'ja-JP': {
      short: {
        hour: 'numeric',
        minute: 'numeric',
        second: 'numeric',
        timeZoneName: 'short',
        timezone: 'Asia/Tokyo'
      }
    }
  },
  numberFormats: {
    'ja-JP': {
      currency: {
        style: 'currency',
        currencyDisplay: 'symbol',
        currency: 'JPY'
      }
    }
  }
}

/**
 * setup vue-i18n with i18n resources with global type definition.
 * if you define the i18n resource schema in your `*.d.ts`, these is checked with typeScript.
 */
const i18n = createI18n<false, typeof options>(options)
```

--------------------------------

### Create an I18n Host Component

Source: https://vue-i18n.intlify.dev/guide/advanced/wc

A wrapper component that provides the i18n instance to child Web Components via provide and I18nInjectionKey.

```vue
<script setup lang="ts">
import { provide } from 'vue'
import { createI18n, I18nInjectionKey } from 'vue-i18n'

/**
 * create an i18n instance to host for other web components
 */
const i18n = createI18n<false>({
  legacy: false, // must set to `false`
  locale: 'en',
  messages: {
    en: {
      hello: 'Hello!'
    },
    ja: {
      hello: 'こんにちは！'
    }
  }
})

/**
 * provide i18n instance with `I18nInjectionKey` for other web components
 */
provide(I18nInjectionKey, i18n)
</script>

<!-- template to slot the content -->
<template>
  <slot />
</template>
```

--------------------------------

### Use useI18n in a Vue component

Source: https://vue-i18n.intlify.dev/guide/advanced/composition

Import and call useI18n at the top of the script setup block to access translation functions.

```vue
<script setup> 
import { useI18n } from 'vue-i18n'
const { t } = useI18n() 
</script>

<template>
  <h1>{{ $t("message.hello") }}</h1>
</template>
```

--------------------------------

### Use Object Syntax in Templates

Source: https://vue-i18n.intlify.dev/guide/advanced/directive

Apply the v-t directive with objects to handle arguments, specific locales, and pluralization.

```html
<div id="object-syntax">
  <!-- literal -->
  <p v-t="{ path: 'message.hi', args: { name: 'kazupon' } }"></p>
  <!-- data binding via data -->
  <p v-t="{ path: byePath, locale: 'en' }"></p>
  <!-- pluralization -->
  <p v-t="{ path: 'message.apple', plural: appleCount }"></p>
</div>
```

```html
<div id="object-syntax">
  <p>こんにちは、 kazupon！</p>
  <p>good bye!</p>
  <p>7 りんご</p>
</div>
```

--------------------------------

### Configure Quasar CLI for i18n

Source: https://vue-i18n.intlify.dev/guide/advanced/sfc

Modify quasar.conf.js to support the <i18n> tag in SFCs.

```js
build: {
  chainWebpack: chain => {
    chain.module
      .rule('i18n-resource')
        .test(/\.(json5?|ya?ml)$/)
          .include.add(path.resolve(__dirname, './src/i18n'))
          .end()
        .type('javascript/auto')
        .use('i18n-resource')
          .loader('@intlify/vue-i18n-loader')
    chain.module
      .rule('i18n')
        .resourceQuery(/blockType=i18n/)
        .type('javascript/auto')
        .use('i18n')
          .loader('@intlify/vue-i18n-loader')
  }
}
```

--------------------------------

### Define locale messages using Rails i18n format

Source: https://vue-i18n.intlify.dev/guide/essentials/syntax

Example of using the deprecated Rails i18n format with % prefixing for interpolation.

```js
const messages = {
  en: {
    message: {
      hello: '%{msg} world'
    }
  }
}
```

--------------------------------

### Switch via NPM Alias

Source: https://vue-i18n.intlify.dev/guide/advanced/lite

Use an npm alias in package.json to swap vue-i18n for petite-vue-i18n without changing import statements.

```diff
 {
   // ...
   "dependencies": {
     "vue": "^3.4.14",
-     "vue-i18n": "^10.0.0"
+     "vue-i18n": "npm:petite-vue-i18n@^10.0.0"
   },
 }
```

--------------------------------

### $n(value, key, locale, args)

Source: https://vue-i18n.intlify.dev/api/injection

Formats a number using a key, locale, and argument values.

```APIDOC
## $n(value: number, key: string, locale: Locale, args: { [key: string]: string | boolean | number })

### Description
Formats a number value using a key, a specific locale, and argument values.

### Parameters
- **value** (number) - A number value to format.
- **key** (string) - A key of number formats.
- **locale** (Locale) - A locale to override the current scope.
- **args** (object) - An object containing argument values.

### Returns
- **NumberFormatResult** - The formatted value.
```

--------------------------------

### Access Version Information

Source: https://vue-i18n.intlify.dev/guide/migration/breaking

Access the library version via named import instead of the removed VueI18n class static property.

```javascript
import VueI18n from 'vue-i18n'

console.log(VueI18n.version)
```

```javascript
import { VERSION } from 'vue-i18n'

console.log(VERSION)
```

--------------------------------

### useI18n

Source: https://vue-i18n.intlify.dev/api/composition

The useI18n function is used within the setup() method of a Vue component to provide localization features. It returns a Composer instance that allows for component-level or global localization depending on the provided options.

```APIDOC
## useI18n

### Description
Use the Composition API for Vue I18n. This function is primarily used within the setup() hook to enable localization in components.

### Signature
`export declare function useI18n<Schema, Locales, Options>(options?: Options): Composer`

### Parameters
- **options** (UseI18nOptions) - Optional - Configuration options for the i18n instance.

### Returns
- **Composer** - An instance providing localization methods like t, locale, etc.

### Example
```javascript
import { useI18n } from 'vue-i18n'

export default {
 setup() {
   const { t, locale } = useI18n({
     locale: 'ja',
     messages: {
       en: { ... },
       ja: { ... }
     }
   })
   return { t, locale }
 }
}
```
```

--------------------------------

### Configure createI18n for Composition API

Source: https://vue-i18n.intlify.dev/guide/migration/vue3

Specify allowComposition: true in the createI18n options to enable Composition API support.

```javascript
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'en',
  allowComposition: true, // you need to specify that!
  messages: {
    en: {
      hello: 'hello!'
    },
    ja: {
      hello: 'こんにちは！'
    }
  }
})

console.log(i18n.allowComposition) // output is true
```
Tokens:
Raw