Vue I18n

https://vue-i18n.intlify.dev/guide/
Admin
Vue I18n is an internationalization plugin for Vue.js that provides easy-to-use localization...
Tokens:34,835
Snippets:382
Trust Score:7.9
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install @intlify/core-base

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

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

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

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

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

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

### 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 Legacy API

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

Setup example for using the legacy API with vue-i18n-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 vue-i18n-loader

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

Install the loader required for Quasar CLI configuration.

```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 Composition API

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

Setup examples for using the Composition API with vue-i18n-bridge in Vue 2.7 and 2.6.

```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')
```

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

### Initialize petite-vue-i18n in browser

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

Setup the i18n instance and mount the Vue application using global variables.

```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>
```

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

### Install petite-vue-i18n via package managers

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

Commands to add the package to your project dependencies.

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

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

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

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

### Use useI18n in Vue Component setup

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

Demonstrates using the useI18n hook within the setup option or script setup syntax.

```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>
```

```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>
```

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

### Message Resolution Examples

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

Demonstrates how flat keys work and why nested structures fail by default.

```js
const i18n = createI18n({
  locale: 'en',
  messages: {
    en: {
      'hello': 'Hello!',
      'baseForm.test': 'Test Form'  // flat key with dot
    }
  }
})

t('hello')          // → "Hello!"
t('baseForm.test')  // → "Test Form"
```

```js
const i18n = createI18n({
  locale: 'en',
  messages: {
    en: {
      baseForm: {
        test: 'Test Form'  // nested structure
      }
    }
  }
})

t('baseForm.test')  // → "" (not resolved!)
```

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

### Expected Output for $n

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

The resulting output of the $n examples provided above.

```html
<p>$10,000.00</p>
<p>￥10,000</p>
<p>￥10000</p>
<p>$988M</p>
<p>99%</p>
<p>99.12%</p>
<p>12.12</p>
<p>12,145,000,000</p>
```

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

### Install unplugin-vue-i18n

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

Install the required plugin for Vite or Webpack support.

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

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

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

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

### Message format syntax example

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

Example of message format syntax using special characters.

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

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

### Install vue-i18n-bridge

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

Commands to add the bridge package using various package managers.

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

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

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

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

### 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 manual approach to localizing messages containing HTML tags.

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

```js
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>
```

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

### 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 as a Vue plugin before mounting the application.

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

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

### Define I18n Setup and Lazy Loading Functions

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

Configures the I18n instance and provides utility functions for switching languages and dynamically importing locale messages.

```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()
}
```

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

### Basic useI18n implementation in App.vue

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

Initialize useI18n within 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>
```

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

### Define locale JSON resources

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

Example content for English, French, and Japanese translation files.

```json
{
  "hello": "Hello, {name}!",
  "language": "Language"
}
```

```json
{
  "hello": "Bonjour, {name}!",
  "language": "Langue"
}
```

```json
{
  "hello": "こんにちは、{name}！",
  "language": "言語"
}
```

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

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

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

Requires installing the composition API and specifying the bridge option during plugin installation.

```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')
```

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

### Custom Pluralization Rules

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

Examples showing the transition from prototype-based pluralization in v8 to configuration-based rules in v9+.

```javascript
VueI18n.prototype.getChoiceIndex = function (choice, choicesLength) {
  // this === VueI18n instance, so the locale property exists
  if (this.locale !== 'ru') {
    // proceed to the default implementation
  }

  if (choice === 0) {
    return 0;
  }

  const teen = choice > 10 && choice < 20;
  const endsWithOne = choice % 10 === 1;

  if (!teen && endsWithOne) {
    return 1;
  }
  if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
    return 2;
  }
  return (choicesLength < 4) ? 2 : 3;
}
```

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

function customRule(choice, choicesLength, orgRule) {
  if (choice === 0) {
    return 0
  }

  const teen = choice > 10 && choice < 20
  const endsWithOne = choice % 10 === 1
  if (!teen && endsWithOne) {
    return 1
  }
  if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
    return 2
  }

  return choicesLength < 4 ? 2 : 3
}

const i18n = createI18n({
  // ...
  pluralizationRules: {
    ru: customRule,
    // ...
  },
  // ...
})
```

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

function customRule(choice, choicesLength, orgRule) {
  if (choice === 0) {
    return 0
  }

  const teen = choice > 10 && choice < 20
  const endsWithOne = choice % 10 === 1
  if (!teen && endsWithOne) {
    return 1
  }
  if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
    return 2
  }

  return choicesLength < 4 ? 2 : 3
}

const MyComp = {
  setup() {
    const { t } = useI18n({
      // ...
      pluralRules: {
        ru: customRule,
        // ...
      },
      // ...
    })

    // ...
  }
}
```

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

### Output of i18n-n Component

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

The resulting HTML output for the basic i18n-n component examples.

```html
<span>100</span>
<span>$100.00</span>
<span>￥100</span>
```

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

### Advanced Scoped Slots Example

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

Apply multiple scoped slots to style different parts of a currency format.

```html
<i18n-n tag="span" :value="1234" :format="{ key: 'currency', currency: 'EUR' }">
  <template #currency="slotProps">
    <span style="color: green">{{ slotProps.currency }}</span>
  </template>
  <template #integer="slotProps">
    <span style="font-weight: bold">{{ slotProps.integer }}</span>
  </template>
  <template #group="slotProps">
    <span style="font-weight: bold">{{ slotProps.group }}</span>
  </template>
  <template #fraction="slotProps">
    <span style="font-size: small">{{ slotProps.fraction }}</span>
  </template>
</i18n-n>
```

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

### Resulting HTML for Advanced Scoped Slots

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

The resulting HTML output for the advanced scoped slots example.

```html
<span>
  <span style="color: green">€</span>
  <span style="font-weight: bold">1</span>
  <span style="font-weight: bold">,</span>
  <span style="font-weight: bold">234</span>
  .
  <span style="font-size: small">00</span>
</span>
```

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

### Configure unplugin-vue-i18n for Vite

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

Setup the plugin in vite.config.ts, including the required include path for locale messages.

```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/**'),
    }),
  ],
})
```

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

### Update app.vue for Localization

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

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

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

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

### Define Messages for Explicit 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 Locale Messages with HTML

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

Example of a locale message resource containing an HTML tag.

```javascript
const messages = {
  en: {
    message: {
      hello: 'hello <br> world'
    }
  }
}
```

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

### Implement ICU Message Format Compiler

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

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

```typescript
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
  }
}
```

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

### Type-safe Template Usage

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

Example of using type-safe translation and number formatting functions within a Vue template.

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

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

### 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>
```

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

### Create Plugins Directory and File

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

Commands to prepare the directory and file for the Nuxt plugin.

```sh
mkdir plugins
```

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

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

### 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
```

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

### Hello World Script

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

Initialization of petite-vue-i18n with a simple message object.

```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')
```

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

### Create locale directory and files

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

Commands to set up the directory structure and JSON files for storing translations.

```sh
mkdir locales
```

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

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

### Hello World Template

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

Basic HTML structure for displaying translated text.

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

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

### Initialize petite-vue-i18n with module bundlers

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

Import dependencies and configure the i18n instance for use in a module-based environment.

```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')
```

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

### Initialize I18n with Datetime Formats

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

Register the defined formats within the createI18n configuration.

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

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

### Project Directory Structure

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

The initial file structure of the created Nuxt 3 project.

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

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

### 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 instance

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

Replaces the class-based 'new VueI18n' with the functional 'createI18n' approach compatible with Vue 3.

```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 createI18n with Type Hints

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

Define global resource schemas using I18nOptions and pass them as type parameters to createI18n.

```ts
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)
```

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

### Initialize I18n with Number Formats

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

Register the defined number formats when creating the i18n instance.

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

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

### Switching via npm Alias

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

Using npm aliases in package.json to swap vue-i18n for petite-vue-i18n.

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

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

### Consume Isolated Scope Composable

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

Example of using a composable with isolated scope alongside a component's local i18n scope.

```vue
<!-- MyComponent.vue -->
<script setup>
import { useI18n } from 'vue-i18n'
import { useProjectStatus } from './useProjectStatus'

// Local scope for the component
const { t } = useI18n({
  messages: {
    en: { title: 'Project Dashboard' },
    ja: { title: 'プロジェクトダッシュボード' }
  }
})

// Composable with isolated scope — no conflict!
const status = useProjectStatus(project)
</script>
```

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

### Merging i18n Custom Blocks

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

Example of combining locale messages from an external JSON file with an i18n custom block in an SFC.

```vue
<script setup>
import { useI18n } from 'vue-i18n'
import en from './en.json'

const { t, availableLocales, getLocaleMessages } = useI18n({
  locale: 'en',
  messages: {
    en
  }
})

availableLocales.forEach(locale => {
  console.log(`${locale} locale messages`, getLocaleMessages(locale))
})
</script>

<i18n locale="ja">
{
  "hello": "こんにちは！"
}
</i18n>
```

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

### TypeScript Compilation Error for Missing Locales

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

Example of the TypeScript compiler error generated when a required locale is missing from the messages configuration.

```shell
$ 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.
```

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

### Initialize Global Vue I18n Instance

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

Create a global i18n instance with locale settings and messages to be used by 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')
```

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

### Include petite-vue-i18n via CDN

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

Load 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>
```

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

### Translate simple keys with locale

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

Compares the $t signature for simple key translation between v9.x and v10.

```vue
<template>
  <p>{{ $t('message.hello', 'ja') }}</p>
</template>
```

```vue
<template>
  <p>{{ $t('message.hello', {}, { locale: 'ja' }) }}</p>
</template>
```

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

### Translate simple keys in templates

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

Migration of $tc to $t for simple key translation.

```vue
<template>
  <p>{{ $tc('banana') }}</p>
</template>
```

```vue
<template>
  <p>{{ $t('banana', 1) }}</p>
</template>
```

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

### Import Vue I18n via CDN

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

Load Vue and Vue I18n globally or as ES modules using unpkg CDN links.

```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">
```

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

### Configure Quasar CLI

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

Modify quasar.conf.js to support the <i18n> tag via chainWebpack.

```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')
  }
}
```

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

### Accessing Version Information

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

Accessing the library version via named imports instead of static class properties.

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

console.log(VueI18n.version)
```

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

console.log(VERSION)
```

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

### Configure Webpack plugin

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

Add the VueI18nPlugin to your webpack.config.js file.

```js
// webpack.config.js
const path = require('path')
const VueI18nPlugin = require('@intlify/unplugin-vue-i18n/webpack')

module.exports = {
  /* ... */
  plugins: [
    /* ... */
    VueI18nPlugin({
      /* options */
      // locale messages resource pre-compile option
      include: path.resolve(__dirname, './path/to/src/locales/**'),
    })
  ]
}
```

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

### 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
```

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

### Configure createI18n for Composition API

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

Set the legacy option to false within the createI18n function to enable Composition API mode.

```javascript
// ...

const i18n = VueI18n.createI18n({
  legacy: false, // you must set `false`, to use Composition API
  locale: 'ja',
  fallbackLocale: 'en',
  messages: {
    en: {
      message: {
        hello: 'hello world'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、世界'
      }
    }
  }
})

// ...
```

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

### Fallback Interpolation Templates and Output

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

Templates using keys as messages and their corresponding rendered output.

```html
<p>{{ $t('Hello {name}', { name: 'John' }) }}</p>
<p>{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}</p>
```

```html
<p>Здравствуйте, John</p>
<p>The weather today is sunny!</p>
```

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

### Console Warnings for Missing Keys

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

Default warning messages generated during development when a key is missing and a fallback is triggered.

```text
[intlify] Not found 'hello' key in 'ja' locale messages.
[intlify] Fall back to translate 'hello' key with 'en' locale.
```

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

### Configure Fallback Interpolation

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

Initialize i18n with formatFallbackMessages enabled to allow template interpolation on missing keys.

```javascript
const messages = {
  ru: {
    'Hello {name}': 'Здравствуйте {name}'
  }
}

const i18n = createI18n({
  locale: 'ru',
  fallbackLocale: 'en',
  formatFallbackMessages: true,
  messages
})
```

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

### Configure Vite plugin

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

Add the VueI18nPlugin to your vite.config.ts file.

```js
// vite.config.ts
import { defineConfig } from 'vite'
import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'node: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/**'),
    }),
  ],
})
```

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

### Include via CDN

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

Script tags for loading dependencies via CDN for Vue 2.7 and Vue 2.6 environments.

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.7"></script>
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.min.js"></script>
<script src="https://unpkg.com/vue-demi@0.13.5/lib/index.iife.js"></script>
<script src="https://unpkg.com/vue-i18n-bridge@9.2.0-beta.38/dist/vue-i18n-bridge.global.prod.js"></script>
```

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.4"></script>
<script src="https://unpkg.com/vue-demi@0.13.5/lib/index.iife.js"></script>
<script src="https://unpkg.com/vue-i18n-bridge@9.2.0-beta.38/dist/vue-i18n-bridge.global.prod.js"></script>
```

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

### Translate with list interpolation and locale

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

Compares the $t signature for list-based interpolation between v9.x and v10.

```vue
<template>
  <p>{{ $t('message.hello', 'ja', ['dio']) }}</p>
</template>
```

```vue
<template>
  <p>{{ $t('message.hello', ['dio'], { locale: 'ja' }) }}</p>
</template>
```

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

### Implement Web Component with useI18n

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

A standard Vue component using the Composition API to access translations.

```vue
<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
</script>

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

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

### Configure Message Resolver and Fallbacker

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

Registering vue-i18n compatible resolvers at the application entry point.

```js
import { createApp } from 'vue'
import {
  createI18n,
  registerMessageResolver, // register the message resolver API
  registerLocaleFallbacker, // register the locale fallbacker API
} from 'petite-vue-i18n'
import {
  resolveValue, // message resolver of vue-i18n which is used by default
  fallbackWithLocaleChain // locale fallbacker of vue-i18n which is used by default
} from '@intlify/core-base'

// register message resolver of vue-i18n
registerMessageResolver(resolveValue)

// register locale fallbacker of vue-i18n
registerLocaleFallbacker(fallbackWithLocaleChain)

// some thing code ...
// ...
```

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

### Vite Plugin Configuration

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

Setting the module option in the Vite plugin for 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/**'),
     }),
   ],
 })
```

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

### List Interpolation Syntax

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

Transitioning from array-like objects to standard arrays for list interpolation parameters.

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

const i18n = new VueI18n({
  // ...
  messages: {
    en: {
      greeting: 'hello, {0}!'
    }
  },
  // ...
})
```

```html
<p>{{ $t('greeting', { '0': 'kazupon' }) }}</p>
```

```html
<p>{{ $t('greeting', ['kazupon']) }}</p>
```

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

### Configure unplugin-vue-i18n for SSR

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

Enable SSR support by setting the ssr option to true in the Vite plugin configuration.

```js
// vite.config.ts
import { defineConfig } from 'vite'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'

export default defineConfig({
  plugins: [
    VueI18nPlugin({
      ssr: true, // Enable SSR support
    }),
  ],
})
```

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

### Using translation functions in templates

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

Demonstrates using both the global $t and the local t function returned by useI18n in a component template.

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

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

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

### Template and Output for Fallback

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

Usage of the translation function and the resulting rendered output.

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

```html
<p>Hello, world!</p>
```

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

### Localize Datetime in Templates

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

Use the $d helper to format dates in Vue templates.

```html
<p>{{ $d(new Date(), 'short') }}</p>
<p>{{ $d(new Date(), 'long', 'ja-JP') }}</p>
```

```html
<p>Apr 19, 2017</p>
<p>2017年4月19日(水) 午前2:19</p>
```

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

### Export I18n Host as Custom Element

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

Use defineCustomElement to export the host component for use as a Web Component.

```js
import { defineCustomElement } from 'vue'
import I18nHost from './components/I18nHost.ce.vue'

const I18nHostElement = defineCustomElement(I18nHost)

export { I18nHostElement }
```

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

### Array-based Fallback Locales

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

Configure multiple fallback locales using an array.

```javascript
fallbackLocale: [ 'fr', 'en' ],
```

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

### Create an I18n Host Component

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

This component creates an i18n instance and provides it to child components using the 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>
```

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

### Define Local Scope with useI18n

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

Creates a new Composer instance with component-specific locale, messages, and formatting options.

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

const { t, d, n, tm, locale } = useI18n({
  locale: 'ja-JP',
  fallbackLocale: 'en-US',
  messages: {
    'en-US': {
      // ....
    },
    'ja-JP': {
      // ...
    }
  },
  datetimeFormats: {
    'en-US': {
      // ....
    },
    'ja-JP': {
      // ...
    }
  },
  numberFormats: {
    'en-US': {
      // ....
    },
    'ja-JP': {
      // ...
    }
  }
})

// Something to do here ...
```

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

### Translate with string syntax

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

Use string literals or data-bound keypaths to translate content using the v-t directive.

```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')
```

```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>
```

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

### Access libraries via global objects

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

Use global objects when working with global builds instead of module imports.

```js
const { createApp } = Vue
const { createI18n, useI18n } = VueI18n
```
Tokens:
Raw