### Vue I18n v12: Options API with setup() example

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/migration/breaking12.md

Shows how to integrate Vue I18n's Composition API into an Options API component using the `setup()` function in v12.

```html
<!-- Options API with useI18n in setup -->
<template>
  <p>{{ t('hello') }}</p>
</template>

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

export default {
  setup() {
    const { t, locale } = useI18n()
    return { t, locale }
  }
}
</script>
```

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

### Hello World Example with petite-vue-i18n

Source: https://github.com/intlify/vue-i18n/blob/master/docs/zh/guide/advanced/lite.md

Demonstrates a basic 'Hello world' translation using petite-vue-i18n. It shows how to configure messages and use the 't' function in a Vue component's setup.

```javascript
const { createApp } = Vue
const { createI18n, useI18n } = PetiteVueI18n
// 或者对于 ES 模块
// import { createApp } from 'vue'
// import { createI18n } from 'petite-vue-i18n'

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

// 定义 App 组件
const App = {
  setup() {
    const { t } = useI18n()
    return { t }
  }
}

const app = createApp(App)

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

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

### Vue-i18n Basic Setup with Petite-Vue

Source: https://github.com/intlify/vue-i18n/blob/master/examples/petite/started.html

Demonstrates the core setup for Vue-i18n using `createI18n` and `useI18n` within a Vue application. Ensure `useI18n` is called at the head of the `setup` function.

```javascript
const { createApp } = Vue
const { createI18n, useI18n } = PetiteVueI18n

const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      'message.language': 'Language',
      'message.hello': 'hello world!'
    },
    ja: {
      'message.language': '言語',
      'message.hello': 'こんにちは、世界！'
    }
  }
})

const app = createApp({
  setup() {
    // `useI18n` return the global composer that is created at `createI18n`
    // `useI18n` must to be called at head of `setup` function
    const { t, locale } = useI18n()

    // Something to do ...
    // return { t, locale }
  }
})

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

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

### Initialize petite-vue-i18n with Vue.js (CDN)

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/advanced/lite.md

This example shows how to integrate petite-vue-i18n into a Vue.js application when using CDN links. It demonstrates the basic setup for creating and mounting the Vue app with the i18n plugin.

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

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

### Start JIT Compilation Preview

Source: https://github.com/intlify/vue-i18n/blob/master/examples/backend/README.md

Starts the preview server for i18n Just-In-Time (JIT) compilation.

```sh
npm run preview # start preview
```

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

### Start Pre-compiled Preview Server

Source: https://github.com/intlify/vue-i18n/blob/master/examples/backend/README.md

Starts the preview server after i18n resources have been pre-compiled.

```sh
npm run preview  # start preview
```

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

### Install petite-vue-i18n using npm

Source: https://github.com/intlify/vue-i18n/blob/master/docs/zh/guide/advanced/lite.md

Install the petite-vue-i18n package using npm. The '@next' tag ensures you get the latest version.

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

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

### Vue.js Setup with petite-vue-i18n and Translation

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/advanced/lite.md

This script sets up a Vue.js application using petite-vue-i18n, including defining messages for different locales and making the translation function `t` available in the component's setup. It demonstrates a 'Hello World' example with internationalization.

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

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

### Initialize petite-vue-i18n with Vue.js (Package Managers)

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/advanced/lite.md

This example demonstrates how to import and initialize petite-vue-i18n within a Vue.js application when installed via package managers. It sets up the i18n instance and mounts the Vue application.

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

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

### Install petite-vue-i18n using pnpm

Source: https://github.com/intlify/vue-i18n/blob/master/docs/zh/guide/advanced/lite.md

Install the petite-vue-i18n package using pnpm. The '@next' tag ensures you get the latest version.

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

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

### Install petite-vue-i18n using yarn

Source: https://github.com/intlify/vue-i18n/blob/master/docs/zh/guide/advanced/lite.md

Install the petite-vue-i18n package using yarn. The '@next' tag ensures you get the latest version.

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

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

### Install Project Dependencies

Source: https://github.com/intlify/vue-i18n/blob/master/examples/storybook/README.md

Run this command to install all necessary project dependencies using pnpm.

```sh
pnpm install
```

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

### Start JIT Compilation Server

Source: https://github.com/intlify/vue-i18n/blob/master/examples/backend/README.md

Starts the server for i18n Just-In-Time (JIT) compilation.

```sh
npm run serve   # start server
```

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

### CDN App Initialization

Source: https://github.com/intlify/vue-i18n/blob/master/packages/petite-vue-i18n/README.md

Initialize your Vue application using petite-vue-i18n with CDN scripts. This example shows basic setup with options.

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

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

### Run Development Server

Source: https://github.com/intlify/vue-i18n/blob/master/examples/backend/README.md

Starts the development server for local testing.

```sh
npm run dev
```

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

### Migrating Options API to Options API with setup() in v12

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/migration/breaking12.md

This snippet demonstrates migrating Options API code to a v12 compatible structure using the setup() function to expose Composition API bindings.

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

export default {
  props: {
    user: {
      type: String,
      required: true
    },
    lang: {
      type: String,
      default: 'en'
    }
  },

  setup() {
    const { t, d, n, locale } = useI18n()

    return {
      t,
      d,
      n,
      i18nLocale: locale
    }
  },

  computed: {
    message() {
      return this.t('welcome', { name: this.user })
    }
  },

  watch: {
    lang(val) {
      this.i18nLocale = val
    }
  },

  methods: {
    greet() {
      return this.t('hello')
    }
  },

  mounted() {
    console.log(this.t('ready'))
    console.log(this.d(new Date(), 'long'))
    console.log(this.n(1000, 'currency'))
  }
}
```

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

### Vue I18n v12: Composition API component example

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/migration/breaking12.md

Demonstrates using Vue I18n's Composition API within a Vue component's `<script setup>` block in v12.

```html
<!-- Using Composition API -->
<template>
  <p>{{ t('hello') }}</p>
</template>

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

const { t, locale } = useI18n()

// Change locale
locale.value = 'ja'
```

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

### Package Manager Installation (NPM)

Source: https://github.com/intlify/vue-i18n/blob/master/packages/petite-vue-i18n/README.md

Install petite-vue-i18n using NPM. This is a standard command for adding packages to your project.

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

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

### Install @intlify/core-base

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/advanced/lite.md

Commands to install the @intlify/core-base package, which provides custom message resolvers and locale fallbackers.

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

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

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

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

### Install @intlify/vue-i18n-loader for pnpm

Source: https://github.com/intlify/vue-i18n/blob/master/docs/zh/guide/advanced/sfc.md

Install the `@intlify/vue-i18n-loader` package as a development dependency using pnpm for Quasar CLI integration.

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

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

### Install vue-i18n-loader

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/advanced/sfc.md

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

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

### Vue App Setup with petite-vue-i18n using Package Manager

Source: https://github.com/intlify/vue-i18n/blob/master/docs/zh/guide/advanced/lite.md

This code snippet shows how to import and set up petite-vue-i18n within a Vue application when installed via a package manager. It initializes the i18n instance and applies it to the Vue app.

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

const i18n = createI18n({
  // vue-i18n 一些选项 ...
})

const app = createApp({
  // vue 一些选项 ...
})

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

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

### Start Development Server

Source: https://github.com/intlify/vue-i18n/blob/master/examples/storybook/README.md

Use this command to compile and run the project in development mode with hot-reloading enabled.

```sh
pnpm dev
```

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

### Develop the format explorer

Source: https://github.com/intlify/vue-i18n/blob/master/packages/format-explorer/README.md

Starts the development server for the format explorer.

```sh
$ yarn dev:explorer
```

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

### Vue App and Child Component Setup

Source: https://github.com/intlify/vue-i18n/blob/master/examples/composition/scope/inherit-locale.html

Sets up the root Vue application and a child component. The child component uses `useI18n` with `inheritLocale: true` to inherit locale from the root. Requires Vue and VueI18n to be installed.

```javascript
const { createApp } = Vue
const { createI18n, useI18n } = VueI18n

const Child = {
  template: `
    <div class="child">
      <h1>Child</h1>
      <form>
        <label>{{ t('message.language') }}</label>
        <select v-model="locale">
          <option value="en">en</option>
          <option value="ja">ja</option>
        </select>
        <input type="checkbox" id="checkbox" v-model="inheritLocale">
        <label for="checkbox">{{ t('message.inherit') }}</label>
      </form>
      <p class="child">{{ t('message.hi') }}</p>
    </div>
  `,
  setup() {
    return useI18n({
      locale: 'en',
      inheritLocale: true,
      messages: {
        en: {
          message: {
            language: 'Language',
            inherit: 'Inherit locale from root',
            hello: 'hello earth!',
            hi: 'Hi there!'
          }
        },
        ja: {
          message: {
            language: '言語',
            inherit: 'root から locale を継承する',
            hello: 'こんにちは、地球！',
            hi: 'やあ！'
          }
        }
      }
    })
  }
}

const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        language: 'Language',
        hello: 'hello world!',
        hi: 'Hi !'
      }
    },
    ja: {
      message: {
        language: '言語',
        hello: 'こんにちは、世界！',
        hi: 'こんにちは！'
      }
    }
  }
})

const app = createApp({
  components: {
    Child
  },
  setup() {
    const { t, locale } = useI18n()
    // Something to do ...
    // return { t, locale }
  }
})

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

```

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

### Install core-base dependency

Source: https://github.com/intlify/vue-i18n/blob/master/packages/petite-vue-i18n/README.md

Install the @intlify/core-base package to access the full message resolver and locale fallbacker implementations.

```sh
npm install --save @intlify/core-base
# for pnpm
# pnpm add @intlify/core-base
# for yarn
# yarn add @intlify/core-base
```

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

### Install vue-i18n with app.use()

Source: https://github.com/intlify/vue-i18n/blob/master/docs/zh/guide/installation.md

When using a module system, explicitly install vue-i18n using app.use() after creating the i18n instance.

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

const i18n = createI18n({
  // vue-i18n 的相关配置 ...
})

const app = createApp({
  // vue 的相关配置
})

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

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

### Install @intlify/vue-i18n-loader for npm

Source: https://github.com/intlify/vue-i18n/blob/master/docs/zh/guide/advanced/sfc.md

Install the `@intlify/vue-i18n-loader` package as a development dependency using npm for Quasar CLI integration.

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

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

### Install Dependencies with Yarn, npm, or pnpm

Source: https://github.com/intlify/vue-i18n/blob/master/examples/frameworks/nuxt3/README.md

Use these commands to install project dependencies based on your package manager. Ensure all necessary packages are downloaded and configured for the project.

```bash
yarn install
```

```bash
npm install
```

```bash
pnpm install --shamefully-hoist
```

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

### Install petite-vue-i18n with Package Managers

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/advanced/lite.md

Install petite-vue-i18n using npm, yarn, or pnpm. This is the recommended approach for projects using module bundlers.

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

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

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

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

### Install @intlify/vue-i18n-loader for yarn

Source: https://github.com/intlify/vue-i18n/blob/master/docs/zh/guide/advanced/sfc.md

Install the `@intlify/vue-i18n-loader` package as a development dependency using yarn for Quasar CLI integration.

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

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

### Usage in <script setup> with useI18n

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/essentials/syntax.md

In Composition API with <script setup>, destructure `t` from `useI18n()` instead of using `$t`.

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

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

<template>
  <p>{{ t('message.hello', { msg: 'hello' }) }}</p>
</template>
```

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

### Install unplugin-vue-i18n

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/advanced/sfc.md

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

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

### Install unplugin-vue-i18n for pnpm

Source: https://github.com/intlify/vue-i18n/blob/master/docs/zh/guide/advanced/sfc.md

Install the unplugin-vue-i18n package as a development dependency using pnpm.

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

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

### Directory Structure for Locales

Source: https://github.com/intlify/vue-i18n/blob/master/docs/zh/guide/advanced/lazy.md

Example project directory structure showing the placement of locale JSON files.

```txt
├── dist
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── components
│   ├── i18n.js
│   ├── index.css
│   ├── locales
│   │   ├── en.json
│   │   └── ja.json
│   ├── main.js
│   ├── pages
│   │   ├── About.vue
│   │   └── Home.vue
│   └── router.js
```

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

### Install vue-i18n using deno

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/installation.md

Use this command to install vue-i18n version 11 with deno.

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

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

### Install unplugin-vue-i18n for npm

Source: https://github.com/intlify/vue-i18n/blob/master/docs/zh/guide/advanced/sfc.md

Install the unplugin-vue-i18n package as a development dependency using npm.

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

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

### Vue App Setup with Vue-i18n

Source: https://github.com/intlify/vue-i18n/blob/master/examples/composition/fallback/component.html

Sets up the Vue application and initializes Vue-i18n with global messages. The `useI18n` composable is used in the root component setup.

```javascript
const { createApp } = Vue
const { createI18n, useI18n } = VueI18n

const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello world',
        greeting: 'good morning, world!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、世界',
        greeting: 'おはよう、世界！'
      }
    }
  }
})

const Component1 = {
  template: 
    `<div id="component">
      <h1>Component1</h1>
      <p class="c1">Component1 locale messages: {{ t("message.hello") }}</p>
      <p class="c2">Fallback global locale messages: {{ t("message.greeting") }}</p>
    </div>`,
  setup() {
    const { t } = useI18n({
      messages: {
        en: {
          message: {
            hello: 'hello component1'
          }
        },
        ja: {
          message: {
            hello: 'こんにちは、component1'
          }
        }
      }
    })
    // Something to do ...
    // return { t }
  }
}

const app = createApp({
  components: {
    Component1
  },
  setup() {
    const { t } = useI18n()
    // Something to do ...
    // return { t }
  }
})

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

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

### Install unplugin-vue-i18n for yarn

Source: https://github.com/intlify/vue-i18n/blob/master/docs/zh/guide/advanced/sfc.md

Install the unplugin-vue-i18n package as a development dependency using yarn.

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

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

### Install @intlify/core-base using npm

Source: https://github.com/intlify/vue-i18n/blob/master/docs/zh/guide/advanced/lite.md

Install the @intlify/core-base package using npm. This package provides advanced message resolvers and locale fallbackers that can be used with petite-vue-i18n.

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

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

### Install @intlify/core-base using yarn

Source: https://github.com/intlify/vue-i18n/blob/master/docs/zh/guide/advanced/lite.md

Install the @intlify/core-base package using yarn. This package provides advanced message resolvers and locale fallbackers that can be used with petite-vue-i18n.

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

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

### Install @intlify/core-base using pnpm

Source: https://github.com/intlify/vue-i18n/blob/master/docs/zh/guide/advanced/lite.md

Install the @intlify/core-base package using pnpm. This package provides advanced message resolvers and locale fallbackers that can be used with petite-vue-i18n.

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

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

### Install vue-i18n using npm

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/installation.md

Use this command to install vue-i18n version 11 with npm.

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

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

### Install vue-i18n using pnpm

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/installation.md

Use this command to install vue-i18n version 11 with pnpm.

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

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

### Install vue-i18n using yarn

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/installation.md

Use this command to install vue-i18n version 11 with yarn.

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

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

### Migrating Options API to <script setup> in v12

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/migration/breaking12.md

This snippet shows the migration of Options API methods, computed properties, watchers, and lifecycle hooks to the Composition API using <script setup> in Vue I18n v12.

```javascript
import { useI18n } from 'vue-i18n'
import { watch, onMounted, computed } from 'vue'

const { t, d, n, locale } = useI18n()

function greet() {
  return t('hello')
}

const message = computed(() => t('welcome', { name: user.value }))

watch(lang, (val) => {
  locale.value = val
})

onMounted(() => {
  console.log(t('ready'))
  console.log(d(new Date(), 'long'))
  console.log(n(1000, 'currency'))
})
```

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

### Vue I18n Initialization

Source: https://github.com/intlify/vue-i18n/blob/master/examples/petite/plural/basic.html

Setup code for creating and mounting the i18n instance with pluralization messages.

```javascript
const { createApp } = Vue const { createI18n, useI18n } = PetiteVueI18n const i18n = createI18n({ locale: 'en', messages: { en: { car: 'car | cars', apple: 'no apples | one apple | {count} apples', banana: 'no bananas | {n} banana | {n} bananas' } } }) const app = createApp({ setup() { const { t } = useI18n() // Something to do ... // return { t } } }) app.use(i18n) app.mount('#app')
```

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

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

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/migration/vue2.md

Commands to add the bridge library to your project dependencies.

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

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

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

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

### Initialize Vue-i18n with AST Messages

Source: https://github.com/intlify/vue-i18n/blob/master/e2e/hotfix/CVE-2024-52809.html

Setup for a Vue application using pre-compiled AST locale messages.

```javascript
const { createApp } = Vue const { createI18n, useI18n } = VueI18n // AST style locale message, which build by `@intlify/unplugin-vue-i18n` const en = { hello: { type: 0, body: { items: [ { type: 3, value: 'hello world!' } ] } } } const i18n = createI18n({ locale: 'en', messages: { en } }) const app = createApp({ setup() { const { t } = useI18n() return { t } } }) app.use(i18n) app.mount('#app')
```

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

### Use template parameters in translation keys

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/essentials/fallback.md

Example of using keys with parameters in templates.

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

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

### Rendered HTML output

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/advanced/composition.md

The resulting HTML output from the basic usage example.

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

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

### Vue-i18n Setup and Usage

Source: https://github.com/intlify/vue-i18n/blob/master/examples/composition/components/translation.html

Sets up Vue-i18n with messages and demonstrates the use of the `t` function for translations within a Vue application.

```javascript
const { createApp, ref } = Vue
const { createI18n, useI18n } = VueI18n

const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        language: 'English',
        quantity: 'Quantity',
        list: 'hello, {0}!',
        named: 'hello, {name}!',
        linked: '@:message.named How are you?',
        plural: 'no bananas | {n} banana | {n} bananas'
      }
    },
    ja: {
      message: {
        language: '日本語',
        list: 'こんにちは、{0}！',
        named: 'こんにちは、{name}！',
        linked: '@:message.named ごきげんいかが？'
      }
    }
  }
})

const app = createApp({
  setup() {
    const { t } = useI18n()
    const count = ref(0)
    return { count, t }
  }
})

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

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

### Vue I18n Configuration

Source: https://github.com/intlify/vue-i18n/blob/master/examples/petite/formatting/list.html

Setup for the Vue I18n instance and application integration.

```javascript
const { createApp } = Vue const { createI18n, useI18n } = PetiteVueI18n const i18n = createI18n({ locale: 'ja', messages: { en: { 'message.language': 'Language', 'message.greeting': 'Hello, {0}!' }, ja: { 'message.language': '言語', 'message.greeting': 'こんにちは、{0}！' } } }) const app = createApp({ setup() { const { t, locale } = useI18n() // Something to do ... // return { t, locale } } }) app.use(i18n) app.mount('#app')
```

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

### Serve the format explorer

Source: https://github.com/intlify/vue-i18n/blob/master/packages/format-explorer/README.md

Serves the built production files locally.

```sh
$ yarn serve:explorer
```

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

### Vue I18n Setup and Locale Management

Source: https://github.com/intlify/vue-i18n/blob/master/docs/zh/guide/advanced/lazy.md

Defines functions for setting up i18n, setting the current locale, and loading locale messages dynamically. Includes an example of setting locale for HTTP headers.

```js
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) {
  i18n.global.locale.value = locale
  /**
   * 注意：
   * 如果你需要为 headers 指定语言设置，例如 `fetch` API，请在此处设置。
   * 以下是 axios 的示例。
   *
   * axios.defaults.headers.common['Accept-Language'] = locale
   */
  document.querySelector('html').setAttribute('lang', locale)
}

export async function loadLocaleMessages(i18n, locale) {
  // 使用动态导入加载语言环境消息
  const messages = await import(
    /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
  )

  // 设置语言环境和语言环境消息
  i18n.global.setLocaleMessage(locale, messages.default)

  return nextTick()
}
```

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

### Build the format explorer

Source: https://github.com/intlify/vue-i18n/blob/master/packages/format-explorer/README.md

Compiles the project for production deployment.

```sh
$ yarn build:explorer
```

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

### Basic Translation Usage in Vue Template

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/advanced/lite.md

This example shows how to display translated text in a Vue template using the `t` function provided by petite-vue-i18n. Ensure the `t` function is exposed in your component's setup.

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

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

### Install vue-i18n-bridge with pnpm

Source: https://github.com/intlify/vue-i18n/blob/master/docs/jp/guide/migration/vue2.md

Use pnpm to install the vue-i18n-bridge package. Ensure you have the correct versions of vue-i18n and vue-demi installed.

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

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

### Install vue-i18n-bridge with yarn

Source: https://github.com/intlify/vue-i18n/blob/master/docs/jp/guide/migration/vue2.md

Use yarn to install the vue-i18n-bridge package. Ensure you have the correct versions of vue-i18n and vue-demi installed.

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

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

### Install vue-i18n-bridge with npm

Source: https://github.com/intlify/vue-i18n/blob/master/docs/jp/guide/migration/vue2.md

Use npm to install the vue-i18n-bridge package. Ensure you have the correct versions of vue-i18n and vue-demi installed.

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

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

### Vue App Setup with petite-vue-i18n via CDN

Source: https://github.com/intlify/vue-i18n/blob/master/docs/zh/guide/advanced/lite.md

This script demonstrates how to create and mount a Vue application using petite-vue-i18n when included via CDN. It initializes the i18n instance and uses it with the Vue app.

```javascript
const { createApp } = Vue
const { createI18n } = PetiteVueI18n

const i18n = createI18n({
  // vue-i18n 一些选项 ...
})

const app = createApp({
  // vue 一些选项 ...
})

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

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

### Run Nuxt Development Server

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/integrations/nuxt.md

Start the Nuxt development server to view your application locally. This command compiles and serves the Nuxt application, allowing you to see changes in real-time.

```sh
npm run dev
```

```sh
yarn dev
```

```sh
pnpm dev
```

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

### Initialize Nuxt Application

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/integrations/nuxt.md

Use nuxi to create a new Nuxt 3 application. This command initializes the project structure and necessary files.

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

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

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

### Build for Production

Source: https://github.com/intlify/vue-i18n/blob/master/examples/storybook/README.md

This command checks types, compiles, and minifies the project for production deployment.

```sh
pnpm build
```

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

### JavaScript Syntax Highlighting with Line Highlight

Source: https://github.com/intlify/vue-i18n/blob/master/examples/ssr/vitepress/markdown-examples.md

Example of JavaScript code with line highlighting enabled. Ensure Shiki is configured for syntax highlighting.

```js
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```

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

### Preview Nuxt 3 Production Build Locally

Source: https://github.com/intlify/vue-i18n/blob/master/examples/frameworks/nuxt3/README.md

After building the application, use this command to locally preview the production build. This helps in testing the deployed version before actual deployment.

```bash
npm run preview
```

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

### Full component example migration

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/advanced/directive.md

Demonstrates the complete migration of a component using the t() function after removing the v-t directive.

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

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

<template>
  <p>{{ t('hello') }}</p>
  <p>{{ t('message.hi', { name: 'kazupon' }) }}</p>
</template>
```

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

### Build Nuxt 3 Application for Production

Source: https://github.com/intlify/vue-i18n/blob/master/examples/frameworks/nuxt3/README.md

Execute this command to create an optimized production build of your Nuxt 3 application. This prepares the app for deployment.

```bash
npm run build
```

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

### Use useI18n in Vue Component setup option

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/migration/vue3.md

In Vue 3 components using the `setup` option, you can access the `t` function for translations by calling `useI18n()` within the `setup` function. This makes translations available globally within the component's scope.

```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 I18n Configuration and Setup

Source: https://github.com/intlify/vue-i18n/blob/master/examples/composition/formatting/named.html

Initialize the i18n instance with messages containing named placeholders and integrate it into the Vue application.

```javascript
const { createApp } = Vue const { createI18n, useI18n } = VueI18n const i18n = createI18n({ locale: 'ja', messages: { en: { message: { language: 'Language', greeting: 'Hello, {name}!' } }, ja: { message: { language: '言語', greeting: 'こんにちは、{name}！' } } } }) const app = createApp({ setup() { const { t, locale } = useI18n() // Something to do ... // return { t, locale } } }) app.use(i18n) app.mount('#app')
```

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

### Setup and Language Management for Vue I18n

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/advanced/lazy.md

Provides functions to initialize vue-i18n, set the current language, and manage HTML lang attribute. Use `setupI18n` for initialization and `setI18nLanguage` for updating the UI language.

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

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

### Vue-i18n Setup with Named Interpolation

Source: https://github.com/intlify/vue-i18n/blob/master/examples/petite/functions/named.html

This snippet shows the setup for Vue-i18n using named interpolation with message functions. It includes locale configuration and message definitions for English and Japanese.

```javascript
const { createApp } = Vue
const { createI18n, useI18n } = PetiteVueI18n

const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      'message.language': 'Language',
      'message.greeting': ctx => `Hello, ${ctx.named('name')}!`
    },
    ja: {
      'message.language': '言語',
      'message.greeting': ctx => `こんにちは、${ctx.named('name')}！`
    }
  }
})

const app = createApp({
  setup() {
    const { t, locale } = useI18n()
    // Something to do ...
    // return { t, locale }
  }
})

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

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

### Create Locales Directory

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/integrations/nuxt.md

Initialize a directory to store external locale resource files.

```sh
mkdir locales
```

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

### Use n composable in <script setup>

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/essentials/number.md

In Vue's Composition API with <script setup>, destructure the 'n' function from useI18n to localize numbers. This provides the same functionality as the $n method.

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

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

<template>
  <p>{{ n(10000, 'currency') }}</p>
  <p>{{ n(10000, 'currency', 'ja-JP') }}</p>
</template>
```

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

### Console Warnings for Missing Keys

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/essentials/local.md

Example of console output when a key is missing in the local scope and falls back to global.

```txt
[intlify] Not found 'message.greeting' key in 'ja' locale messages.
[intlify] Fall back to translate 'message.greeting' with root locale.
```

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

### Vue 2.6 Composition API Usage with vue-i18n-bridge

Source: https://github.com/intlify/vue-i18n/blob/master/docs/jp/guide/migration/vue2.md

Demonstrates setting up vue-i18n-bridge with Composition API for Vue 2.6. Ensure you install @vue/composition-api and use the '{ bridge: true }' option when installing vue-i18n. Pass the VueI18n constructor to createI18n.

```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 }) // vue-i18n をインストールするときに '{ bridge: true }' プラグインオプションを指定する必要があります

// `createI18n` オプションは 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) // `vue-i18n-bridge` が提供する `createI18n` には 2 番目の引数があり、`vue-i18n` が提供する `VueI18n` コンストラクターを渡す**必要があります**

const app = createApp({
 setup() {
   // `useI18n` オプションは vue-i18n (vue-i18n@v9.x) API とほぼ同じです
   const { t, locale } = useI18n()
   // ... 何かする

   return { t, locale }
 }
})

app.use(i18n) // `createI18n` によって作成された `i18n` インスタンスをインストールする必要があります
app.mount('#app')
```

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

### Use useI18n in Vue Component with <script setup>

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/migration/vue3.md

For Vue 3 components utilizing the `<script setup>` syntax, the `useI18n()` function can be directly imported and called to obtain the `t` function for translations. This provides a concise way to access global translations within the component.

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

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

### Vue-i18n Setup with Custom Plural Rule (JavaScript)

Source: https://github.com/intlify/vue-i18n/blob/master/examples/composition/plural/custom.html

Initializes Vue-i18n with a custom plural rule for the Russian locale. It includes messages for 'car' and 'banana' with plural variations defined by the custom rule. This setup is necessary for the custom pluralization to work within the Vue application.

```javascript
const { createApp } = Vue
const { createI18n, useI18n } = VueI18n

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({
  locale: 'ru',
  pluralRules: {
    ru: customRule
  },
  messages: {
    ru: {
      car: '0 машин | {n} машина | {n} машины | {n} машин',
      banana: 'нет бананов | {n} банан | {n} банана | {n} бананов'
    }
  }
})

const app = createApp({
  setup() {
    const { t } = useI18n()
    // Something to do ...
    // return { t }
  }
})

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

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

### Create i18n instance

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/advanced/composition.md

Initialize the i18n instance with locales and messages.

```js
// ...

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

// ...
```

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

### Expected Output of Local Scope Example

Source: https://github.com/intlify/vue-i18n/blob/master/docs/guide/essentials/local.md

The rendered HTML output demonstrating local and global scope 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>
```