### Clone Repository and Install Dependencies (Bash)

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/examples/integration/contentful/docs/GETTING-STARTED.md

This snippet shows the commands to clone the project repository from GitHub and install all necessary project dependencies using npm.

```bash
git clone git@github.com:contentful/blog-in-5-minutes.git
cd blog-in-5-minutes
npm install
```

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

### Start Development Server (Bash)

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/examples/integration/contentful/docs/GETTING-STARTED.md

This command starts the local development server for the project, typically accessible at localhost:3000, allowing you to preview your site with the imported Contentful data.

```bash
npm run dev
```

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

### HTML Setup for Vue I18n

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/docs/started.html

This snippet shows how to include Vue.js and Vue I18n via CDN in an HTML file. It sets up a basic Vue instance with a div element where translated messages will be displayed using the $t helper.

```html
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

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

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

### Setup and Build Performance Comparison Examples (Shell)

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/examples/perf/README.md

Commands to set up and build the performance comparison examples for vue-i18n. These scripts prepare the project for performance testing.

```sh
# setup performance comparison examples
$ npm run setup

# build performance comparison examples
$ npm run build
```

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

### Build Vue-i18n Development Version from GitHub

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/gitbook/en/installation.md

This sequence of commands outlines the process for cloning the Vue-i18n repository from GitHub, installing its dependencies, and building the development version. This is necessary if you need to work with the latest unreleased features or contribute to the project.

```bash
git clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n
cd node_modules/vue-i18n
npm install
npm run build
```

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

### Vue I18n Setup with Vue.use()

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/docs/installation.html

Demonstrates how to explicitly install Vue I18n after importing it when using a module system. This step is not required when using global script tags.

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

Vue.use(VueI18n)
```

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

### Install Global Vue CLI

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/vuepress/installation.md

Install Vue CLI globally on your system. This is a prerequisite for using the `vue add i18n` command.

```sh
npm install @vue/cli -g
```

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

### Deploy Site using Now (Bash)

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/examples/integration/contentful/docs/GETTING-STARTED.md

This command deploys the Vue.js site to Zeit's 'now' platform, which offers static hosting. It may prompt for email confirmation before deployment.

```bash
npm run deploy
```

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

### Install and Initialize Vue I18n v8 (JavaScript)

Source: https://context7.com/kazupon/vue-i18n/llms.txt

Demonstrates how to install the VueI18n plugin and create an i18n instance with locale messages for a Vue.js 2 application. It shows basic setup for English and Japanese locales and how to mount the Vue instance with the i18n configuration.

```javascript
Vue.use(VueI18n)

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

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

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

### Install Vue-i18n using NPM

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/vuepress/installation.md

Install vue-i18n version 8 using NPM. This is the recommended method for projects using a module bundler.

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

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

### Install Vue-i18n using Yarn

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/vuepress/installation.md

Install vue-i18n version 8 using Yarn. This command is an alternative to NPM for package management.

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

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

### Include Vue and Vue-i18n Libraries

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/vuepress/started.md

This snippet shows how to include the Vue.js and Vue-i18n libraries from a CDN in an HTML file. These are necessary to use Vue-i18n for internationalization within a Vue application. The HTML also includes a basic Vue instance mount point.

```html
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n@8"></script>

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

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

### Render Translated Text in HTML Output

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/gitbook/en/started.md

This HTML snippet represents the final rendered output of the Vue application after Vue-I18n has processed the internationalization. It displays the 'hello world' message in Japanese as configured.

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

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

### Serve and Measure Performance Examples (Shell)

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/examples/perf/README.md

Commands to serve the performance comparison examples and initiate performance measurements. These are used to run and test the vue-i18n performance.

```sh
# serve perform comparison examples
$ npm run serve

# measure performance !!
$ npm run perform
```

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

### JavaScript Configuration for Vue I18n

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/docs/started.html

This JavaScript snippet demonstrates how to configure Vue I18n. It defines locale messages for English and Japanese and creates a VueI18n instance, which is then passed to the Vue instance. This requires Vue and VueI18n to be imported or available globally.

```javascript
// If using a module system (e.g. via vue-cli), import Vue and VueI18n and then call Vue.use(VueI18n).
// import Vue from 'vue'
// import VueI18n from 'vue-i18n'
//
// Vue.use(VueI18n)

// Ready translated locale messages
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'ja', // set locale
  messages, // set locale messages
})


// Create a Vue instance with `i18n` option
new Vue({ i18n }).$mount('#app')
```

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

### Import Contentful Data using npm Script (Bash)

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/examples/integration/contentful/docs/GETTING-STARTED.md

This command uses an npm script to import data into a newly created Contentful space. It requires the space ID and a management token as arguments.

```bash
npm run import-data -- --space-id YOUR_SPACE_ID --management-token YOUR_MANAGEMENT_TOKEN
```

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

### Contentful Configuration File (.contentful.json)

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/examples/integration/contentful/docs/GETTING-STARTED.md

This JSON configuration file holds essential Contentful credentials for the project. It includes space ID, delivery access token, and management access token, along with predefined content type IDs.

```json
{
  "CTF_PERSON_ID": "15jwOBqpxqSAOy2eOO4S0m",
  "CTF_BLOG_POST_TYPE_ID": "blogPost",
  "CTF_SPACE_ID": "YOUR_SPACE_ID",
  "CTF_CDA_ACCESS_TOKEN": "YOUR_DELIVERY_ACCESS_TOKEN",
  "CTF_CMA_ACCESS_TOKEN": "YOUR_MANAGEMENT_ACCESS_TOKEN"
}
```

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

### Configure Vue-i18n with locales and set language

Source: https://github.com/kazupon/vue-i18n/wiki/Usage-for-v3.0

Shows how to use Vue.use() with vue-i18n, set the default language using Vue.config.lang, and register multiple locales using Vue.locale. This example assumes Vue.js and vue-i18n are installed.

```javascript
var Vue = require('vue')
var VueI18n = require('vue-i18n')

// ready translated locales
var locales = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

// install plugin
Vue.use(VueI18n)


// set lang
Vue.config.lang = 'ja'

// set locales
Object.keys(locales).forEach(function (lang) {
  Vue.locale(lang, locales[lang])
})

// create instance
new Vue({ el: 'body' })
```

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

### Initialize Vue-i18n plugin and set language

Source: https://github.com/kazupon/vue-i18n/wiki/Usage-for-v3.0

Demonstrates how to explicitly install the vue-i18n plugin using Vue.use() in a CommonJS environment. It also shows how to set the default language and register a locale. Requires Vue.js and vue-i18n to be installed.

```javascript
var Vue = require('vue')
var VueI18n = require('vue-i18n')

Vue.use(VueI18n)
Vue.config.lang = 'ja'
Vue.locale('ja', { ... })
```

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

### Install vue-i18n via npm

Source: https://github.com/kazupon/vue-i18n/wiki/Usage-for-v3.0

Installs the vue-i18n package using npm. This is the standard method for adding the plugin to a Vue.js project. No specific inputs or outputs are mentioned beyond the package installation.

```shell
npm install vue-i18n
```

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

### Using $tc for Pluralization in Vue Templates

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/docs/guide/pluralization.html

These Vue template examples show how to use the `$tc()` function to display localized strings with correct pluralization for Russian. The examples cover various numbers to test different plural forms defined in the message objects.

```html
<p>{{ $tc('car', 1) }}</p>
<p>{{ $tc('car', 2) }}</p>
<p>{{ $tc('car', 4) }}</p>
<p>{{ $tc('car', 12) }}</p>
<p>{{ $tc('car', 21) }}</p>

<p>{{ $tc('banana', 0) }}</p>
<p>{{ $tc('banana', 4) }}</p>
<p>{{ $tc('banana', 11) }}</p>
<p>{{ $tc('banana', 31) }}</p>
```

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

### Vue-i18n Initialization with Locale Messages

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/vuepress/api/README.md

Example of initializing VueI18n with locale messages. This setup defines the translations for different languages, which are then used by the 'v-t' directive and '$t' method. The 'messages' option is used during VueI18n instantiation.

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

Vue.use(VueI18n);

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

const i18n = new VueI18n({
  locale: 'en',
  messages
});

new Vue({
  i18n,
  data: {
    url: '/term'
  }
}).$mount('#app');
```

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

### Custom Formatter Implementation in Vue-i18n

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/vuepress/guide/formatting.md

Provides an example of implementing a custom formatter in Vue-i18n using ES2015 class syntax. This allows for advanced interpolation logic, such as ICU message syntax, and requires implementing the `interpolate` method.

```javascript
// Custom Formatter implementation
class CustomFormatter {
     constructor (options) {
       // ...
     }

     interpolate (message, values) {
       // implement interpolation logic here
       // ...

       // return the interpolated array
       return ['resolved message string']
     }
}

// register with `formatter` option
const i18n = new VueI18n({
  locale: 'en-US',
  formatter: new CustomFormatter(/* here the constructor options */),
  messages: {
    'en-US': {
      // ...
    },
    // ...
  }
})

// Run!
new Vue({ i18n }).$mount('#app')
```

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

### Vue-i18n Configuration and Vue Instance Setup

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/examples/datetime/index.html

This JavaScript code configures vue-i18n with messages and datetime formats for 'en-US' and 'ja-JP' locales. It then initializes a Vue instance, injecting the i18n configuration. The instance manages the current locale, 'now', and 'pastDatetime' data properties, and updates the 'now' data property every second. It also includes a watcher to update the i18n locale when the component's locale changes.

```javascript
var messages = { 'en-US': { current_datetime: 'current datetime', past_datetime: 'past datetime', past_year: 'past year' }, 'ja-JP': { current_datetime: '現在の日時', past_datetime: '過去の日時', past_year: '過去の年' } }
var dateTimeFormats = {
  'en-US': {
    long: {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      timeZone: 'America/Los_Angeles'
    }
  },
  'ja-JP': {
    long: {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: true,
      timeZone: 'Asia/Tokyo'
    }
  }
}

Vue.use(VueI18n)

var initial = 'ja-JP'
var i18n = new VueI18n({
  locale: initial,
  messages: messages,
  dateTimeFormats: dateTimeFormats
})

var vm = new Vue({
  i18n: i18n,
  data: {
    locale: initial,
    now: new Date(),
    pastDatetime: new Date(Date.UTC(2012, 11, 20, 3, 0, 0))
  },
  watch: {
    locale: function (val) {
      this.$i18n.locale = val
    }
  }
}).$mount('#app')

setInterval(function () {
  vm.now = new Date()
}, 1000)
```

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

### Vue I18n Template for Accessing Pluralization Count

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/docs/guide/pluralization.html

Shows Vue template examples that utilize the $tc() method to display pluralized strings, specifically demonstrating how the {count} and {n} arguments are used to control the output based on the provided number and optional data.

```html
<p>{{ $tc('apple', 10, { count: 10 }) }}</p>
<p>{{ $tc('apple', 10) }}</p>

<p>{{ $tc('banana', 1, { n: 1 }) }}</p>
<p>{{ $tc('banana', 1) }}</p>
<p>{{ $tc('banana', 100, { n: 'too many' }) }}</p>
```

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

### Install Vue I18n via Yarn

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/docs/installation.html

Installs the Vue I18n package using the Yarn package manager. This is an alternative to NPM for managing project dependencies.

```bash
yarn add vue-i18n
```

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

### Vue-i18n Initialization with Number Formats

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/vuepress/api/README.md

Example of initializing VueI18n with custom number formats. This configuration allows for locale-specific currency, percentage, or other numeric representations. The 'numberFormats' option is used during VueI18n instantiation.

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

Vue.use(VueI18n);

const numberFormats = {
  'en-US': {
    currency: { style: 'currency', currency: 'USD' }
  },
  'ja-JP': {
    currency: { style: 'currency', currency: 'JPY' }
  }
};

const i18n = new VueI18n({
  locale: 'en-US',
  numberFormats
});

new Vue({
  i18n,
  data: {
    money: 10234
  }
}).$mount('#app');
```

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

### Install vue-i18n-loader

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/docs/guide/sfc.html

Installs the necessary vue-i18n-loader for handling custom i18n blocks in Vue single file components. This is a development dependency.

```bash
npm i --save-dev @intlify/vue-i18n-loader@next
```

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

### Vue I18n Installation with Vue CLI

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/docs/installation.html

Adds Vue I18n to a project using the Vue CLI plugin. This command assumes Vue CLI 3.x is installed globally.

```bash
vue add i18n
```

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

### Include Vue I18n via CDN

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/docs/installation.html

Includes Vue.js and Vue I18n directly from CDNs using script tags. This method is suitable for simple projects or quick testing.

```html
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
```

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

### Vue I18n CDN with Specific Version

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/docs/installation.html

Includes a specific version of Vue I18n from a CDN. This allows for more control over the exact version used in the project.

```html
<script src="https://unpkg.com/vue-i18n@8.17.5/dist/vue-i18n.js"></script>
```

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

### Vue SFC with i18n Custom Block Example

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/gitbook/en/sfc.md

Demonstrates a basic Vue single file component utilizing the `<i18n>` custom block for embedding locale messages. This example shows how to define messages in different languages and switch between them using a dropdown.

```html
<i18n>
{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界！"
  }
}
</i18n>

<template>
  <div id="app">
    <label for="locale">locale</label>
    <select v-model="locale">
      <option>en</option>
      <option>ja</option>
    </select>
    <p>message: {{ $t('hello') }}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () { return { locale: 'en' } },
  watch: {
    locale (val) {
      this.$i18n.locale = val
    }
  }
}
</script>
```

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

### Install vue-i18n-loader for SFCs

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/vuepress/guide/sfc.md

Command to install the necessary loader for processing the `<i18n>` custom blocks in Vue single file components. This is a prerequisite for using the custom block functionality with build tools like Webpack.

```sh
npm i --save-dev @intlify/vue-i18n-loader
```

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

### Vue-i18n String Syntax Custom Directive

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/examples/directive/index.html

Example of using string syntax for a custom directive with Vue-i18n. It initializes Vue with the i18n plugin and sets up messages for 'en' and 'ja' locales. The directive is mounted to an element with the ID 'string-syntax'.

```javascript
new Vue({
  i18n: new VueI18n({
    locale: 'en',
    messages: {
      en: { hello: 'hi there!' },
      ja: { hello: 'こんにちは！' }
    }
  }),
  data: {
    path: 'hello'
  }
}).$mount('#string-syntax')
```

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

### Vue-i18n Component Interpolation Example (HTML)

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/gitbook/en/api.md

Demonstrates how to use the Vue-i18n component for interpolating dynamic content, such as links, within translated strings. It requires Vue.js and the Vue-i18n library.

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

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

### Register locale with an object

Source: https://github.com/kazupon/vue-i18n/wiki/Usage-for-v3.0

Shows how to register a locale object directly using `Vue.locale`. This is a synchronous way to add translation data for a specific language. Requires vue-i18n to be installed.

```javascript
// register locale with object
Vue.locale('en', { message: 'hello' })
```

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

### Dynamically load locale data via fetch

Source: https://github.com/kazupon/vue-i18n/wiki/Usage-for-v3.0

Example of dynamically loading locale data from an external API using the `fetch` function. It demonstrates setting a language, making an asynchronous request, handling the response, and updating the application's locale. Includes error handling and promise-based logic.

```javascript
var self = this
var lang = 'ja'
Vue.locale(lang, function () {
  self.loading = true
  return fetch('/locale/' + lang, {
    method: 'get',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    }
  }).then(function (res) {
    return res.json()
  }).then(function (json) {
    self.loading = false
    if (Object.keys(json).length === 0) {
      return Promise.reject(new Error('locale empty !!'))
    } else {
      return Promise.resolve(json)
    }
  }).catch(function (error) {
    self.error = error.message
    return Promise.reject()
  })
}, function () {
  Vue.config.lang = lang
})
```

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

### Get Vue-I18n Version

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/docs/api/index.html

The `version` static property of the VueI18n class returns the currently installed version of the vue-i18n library as a string.

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

console.log('Vue-I18n version:', VueI18n.version);
```

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

### Vue-i18n Basic Pluralization Setup (JavaScript & HTML)

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/gitbook/en/pluralization.md

Demonstrates how to set up basic pluralization in Vue-i18n using JavaScript for locale messages and HTML for template rendering. It defines messages with pipe separators for singular and plural forms and shows the usage of the $tc() method to select the correct plural form based on a count.

```javascript
const messages = {
  en: {
    car: 'car | cars',
    apple: 'no apples | one apple | {count} apples'
  }
}
```

```html
<p>{{ $tc('car', 1) }}</p>
<p>{{ $tc('car', 2) }}</p>

<p>{{ $tc('apple', 0) }}</p>
<p>{{ $tc('apple', 1) }}</p>
<p>{{ $tc('apple', 10, { count: 10 }) }}</p>
```

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

### Vue-i18n: Fallback Interpolation Example

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/vuepress/guide/fallback.md

This JavaScript setup for Vue-i18n enables `formatFallbackMessages: true`. This allows translation keys themselves to act as templates, useful when a direct translation is missing but the key string can be used for interpolation.

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

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

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

### Vue-i18n Initialization and Data Setup (JavaScript)

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/gitbook/en/api.md

Shows the JavaScript code for initializing Vue-i18n with messages for different locales and setting up a Vue instance with data. This code is essential for enabling internationalization in a Vue application.

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

const i18n = new VueI18n({
  locale: 'en',
  messages
})
new Vue({
  i18n,
  data: {
    url: '/term'
  }
}).$mount('#app')
```

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

### Set global language configuration in Vue-i18n

Source: https://github.com/kazupon/vue-i18n/wiki/Usage-for-v3.0

Demonstrates how to get or set the current translation language code using `Vue.config.lang`. The default language is 'en'. This allows for dynamic control over the application's language. Requires vue-i18n to be installed.

```javascript
Vue.config.lang = 'ja'
```

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

### VueI18n Class - Constructor Options

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/docs/api/index.html

Details on the options that can be passed when creating a new VueI18n instance.

```APIDOC
## VueI18n Class - Constructor Options

### Description
Options that can be provided when initializing the `VueI18n` constructor. These options are based on the `I18nOptions` interface.

#### locale
- **Type:** `Locale`
- **Default:** `'en-US'`
- **Description:** The primary locale for localization. Can include territory and dialect (e.g., 'en-US', 'fr-FR').

#### fallbackLocale
- **Type:** `FallbackLocale`
- **Default:** `false`
- **Description:** The locale to fall back to if a translation is not found in the current locale. Supports complex fallback chains as described in the fallback guide.
```

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

### Component-Based Localization Setup with Vue-i18n

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/vuepress/guide/component.md

This JavaScript code demonstrates setting up locale information for a root Vue instance and a specific component using Vue-i18n. It shows how translations are applied and how components can fallback to global locale messages if their own messages are not defined.

```javascript
const i18n = new VueI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello world',
        greeting: 'good morning'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、世界',
        greeting: 'おはようございます'
      }
    }
  }
})

// Define component
const Component1 = {
  template: `
    <div class="container">
     <p>Component1 locale messages: {{ $t("message.hello") }}</p>
     <p>Fallback global locale messages: {{ $t("message.greeting") }}</p>
   </div>`,
  i18n: { // `i18n` option, setup locale info for component
    messages: {
      en: { message: { hello: 'hello component1' } },
      ja: { message: { hello: 'こんにちは、component1' } }
    }
  }
}

new Vue({
  i18n,
  components: {
    Component1
  }
}).$mount('#app')
```

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

### Webpack Configuration for YAML loading with vue-loader v15+

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/docs/guide/sfc.html

Example of configuring Webpack using `chainWebpack` for Vue CLI 3.0 to support YAML format in i18n custom blocks. This setup leverages the pre-loader feature of vue-loader for version 15 and later.

```javascript
// Vue CLI 3.0
module.exports = {
  chainWebpack: config => {
    config.module

```

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

### Vue-i18n Russian Pluralization Message Structure

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/docs/guide/pluralization.html

This example demonstrates the structure of message objects for Russian in Vue-i18n, utilizing custom pluralization rules. It defines plural forms for 'car' and 'banana' using a pipe-separated format corresponding to the indices returned by the custom `getChoiceIndex` function.

```javascript
const messages = {
  ru: {
    car: '0 машин | {n} машина | {n} машины | {n} машин',
    banana: 'нет бананов | {n} банан | {n} банана | {n} бананов'
  }
}
```

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

### Vue I18n Pluralization Template Usage

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/docs/guide/pluralization.html

Demonstrates how to use the $tc() method in Vue templates to render pluralized strings. It shows examples of translating 'car' with singular and plural forms, and 'apple' with zero, one, and multiple counts, including passing explicit count data.

```html
<p>{{ $tc('car', 1) }}</p>
<p>{{ $tc('car', 2) }}</p>

<p>{{ $tc('apple', 0) }}</p>
<p>{{ $tc('apple', 1) }}</p>
<p>{{ $tc('apple', 10, { count: 10 }) }}</p>
```

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

### Vue I18n Hot Reloading - Basic Example

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/docs/guide/hot-reload.html

This JavaScript code demonstrates basic hot reloading for a static set of locales in Vue I18n. It uses Webpack's `module.hot.accept` to explicitly update locale messages when locale files change. Ensure you have Vue and VueI18n installed.

```javascript
import Vue from "vue"
import VueI18n from "vue-i18n"
import en from './en'
import ja from './ja'

const messages = {
  en,
  ja
}

// VueI18n instance
const i18n = new VueI18n({
  locale: 'en',
  messages
})

// Run app
const app = new Vue({
  i18n,
  // ...
}).$mount('#app')

// Hot updates
if (module.hot) {
  module.hot.accept(['./en', './ja'], function () {
    i18n.setLocaleMessage('en', require('./en').default)
    i18n.setLocaleMessage('ja', require('./ja').default)
    // Or the following hot updates via $i18n property
    // app.$i18n.setLocaleMessage('en', require('./en').default)
    // app.$i18n.setLocaleMessage('ja', require('./ja').default)
  })
}
```

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

### v-t Directive Examples

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/gitbook/en/api.md

Demonstrates the usage of the 'v-t' directive for localizing element text content. Supports both string syntax for direct keypaths and object syntax for more complex configurations including locale, arguments, and pluralization choices. This directive requires Vue I18n version 7.3 or higher.

```html
<p v-t="'foo.bar'"></p>

<p v-t="msg"></p>

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

<p v-t="{ path: greeting, args: { name: fullName } }"></p>
```

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

### Register locale with an external source and callback

Source: https://github.com/kazupon/vue-i18n/wiki/Usage-for-v3.0

Illustrates registering a locale dynamically by providing a function that fetches locale data and a callback to set the language after successful loading. This method is useful for asynchronous locale loading. Requires vue-i18n.

```javascript
// register with external locale
Vue.locale('ja', function () {
  return fetch('/locales/ja', {
    method: 'get',
    // ...
  }).then(function (json) {
    return Promise.resolve(json)
  }).catch(function (error) {
    return Promise.reject()
  })
}, function () {
  Vue.config.lang = 'ja'
})
```

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

### Vue I18n Initialization and Hot Reload Setup

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/docs/guide/hot-reload.html

This JavaScript code initializes a VueI18n instance with loaded messages and sets up hot module replacement to dynamically update locale messages. It defines a `loadMessages` function, creates a VueI18n instance, mounts the Vue application, and registers a callback for `module.hot.accept` to handle new message loading and apply changes to the i18n instance. Dependencies include Vue and VueI18n.

```javascript
const { context, messages } = loadMessages();

    // VueI18n instance
    const i18n = new VueI18n({
      locale: "en",
      messages,
    });
    
    // Run app
    const app = new Vue({
      i18n,
      // ...
    }).$mount('#app');
    
    // Hot updates
    if (module.hot) {
      module.hot.accept(context.id, () => {
        const { messages: newMessages } = loadMessages();
    
        Object.keys(newMessages)
          .filter((locale) => messages[locale] !== newMessages[locale])
          .forEach((locale) => {
            messages[locale] = newMessages[locale];
            i18n.setLocaleMessage(locale, messages[locale]);
          });
      });
    }
```

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

### Vue-i18n Setup and Async Language Loading (JavaScript)

Source: https://github.com/kazupon/vue-i18n/blob/v8.x/vuepress/guide/lazy-loading.md

Sets up Vue-i18n with an initial locale and provides a function to asynchronously load new language files. It uses Webpack's dynamic import for code splitting and manages loaded languages to avoid redundant loading. Dependencies include Vue, VueI18n, and axios.

```javascript
//i18n-setup.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from '@/lang/en'
import axios from 'axios'

Vue.use(VueI18n)

export const i18n = new VueI18n({
  locale: 'en', // set locale
  fallbackLocale: 'en',
  messages // set locale messages
})

const loadedLanguages = ['en'] // our default language that is preloaded

function setI18nLanguage (lang) {
  i18n.locale = lang
  axios.defaults.headers.common['Accept-Language'] = lang
  document.querySelector('html').setAttribute('lang', lang)
  return lang
}

export function loadLanguageAsync(lang) {
  // If the same language
  if (i18n.locale === lang) {
    return Promise.resolve(setI18nLanguage(lang))
  }

  // If the language was already loaded
  if (loadedLanguages.includes(lang)) {
    return Promise.resolve(setI18nLanguage(lang))
  }

  // If the language hasn't been loaded yet
  return import(/* webpackChunkName: "lang-[request]" */ `@/lang/${lang}.js`).then(
    messages => {
      i18n.setLocaleMessage(lang, messages.default)
      loadedLanguages.push(lang)
      return setI18nLanguage(lang)
    }
  )
}
```