vue-i18n 9.4.1

Vue-i18n is an internationalization plugin for Vue.js. It is designed to ease the process of providing different languages for Vue.js applications, giving a superb experience to users around the world regardless of their language preferences.

To get started with using vue-i18n, you will have to install and import relevant dependencies. The exact file you will use depends on your setup. If you are working directly in the browser, you might use the vue-i18n(.runtime).global(.prod).js. If you are using native ES modules, you may prefer vue-i18n(.runtime).esm-browser(.prod).js. For those using a bundle like webpack, rollup, or parcel, vue-i18n(.runtime).esm-bundler.js is the appropriate choice. In a Node.js environment, either vue-i18n.cjs(.prod).js or vue-i18n(.runtime).node.mjs should be used.

For a quick setup, let's assume you are using a bundler like webpack:

1. Install vue-i18n:

npm install vue-i18n@next

2. Then you'll need to create an i18n instance and mount it on the Vue instance:

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

const i18n = createI18n({
  legacy: false,  // you must specify 'legacy: false' option
  locale: 'ja',
  fallbackLocale: 'en',
  messages: {
    en: {
      message: {
        hello: 'hello world'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、世界'
      }
    }
  }
})

const app = createApp({})

app.use(i18n)

3. At this point, you can use this in the template:

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

In this setup, we have English as the fallback language, Japanese as the default language, and the messages that we want to translate.

Vue-i18n has comprehensive documentation available for developers. The documentation is located on the Vue.js internationalization plugin repository on GitHub. You can find it directly at: https://github.com/intlify/vue-i18n-next/. Traverse through the repository to find all the information you need, including installation setup, examples, and solutions to common issues.