USAGE.md

Quick Start

To avoid unnecessary duplicate document content, some of the documents in this library are linked to the content in i18n-pro
The i18n-pro related link in the current document is based on the 2.0.0 version. If you are using a different version, you need to check the document corresponding to the version you are using to avoid inconsistent usage

Table of Contents

  1. Install
  2. Access API
    Configure Initial State
    Register Plugin
    Wrap Translation Text with $t
  3. Initialize Command Line Configuration File
  4. Adjust i18nrc.js Configuration
  5. Execute Translation Command
  6. Importing Language Pack
  7. Switch Language
     Composition API
     Options API
  8. Demo

1. Install

npm i @i18n-pro/vue
# or
yarn add @i18n-pro/vue
# or
# Note: To prevent issues where the i18n command cannot be used due to ghost dependencies, it is essential to install i18n-pro when using pnpm
pnpm i i18n-pro @i18n-pro/vue

2. Access API

Configure Initial State

// i18n.ts
import { createI18n } from '@i18n-pro/vue'

export default createI18n({
  namespace: 'testNamespace',
})

Register Plugin

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'

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

Wrap Translation Text with $t

// App.tsx
<template>
  <div> {{ $t('hello world') }} </div>
</template>

3. Initialize Command Line Configuration File

Please refer to

4. Adjust i18nrc.js Configuration

Please refer to

5. Execute Translation Command

Please refer to

6. Importing Language Pack

The language pack already exists, so it needs to be applied to the project

If the generated language pack is a separate file form （output.langType == 'multiple'） for each language, the operation is as follows:

// i18n.ts
import { createI18n } from '@i18n-pro/vue'
+ import zh from './i18n/zh.json'
+ import ja from './i18n/ja.json'

export default createI18n({
  namespace: 'testNamespace',
+  locale: 'zh',
+  langs: {
+    zh,
+    ja,
+  },
})

If the generated language pack is in the form of aggregation （output.langType == 'single'）, the operation is as follows:

// i18n.ts
import { createI18n } from '@i18n-pro/vue'
+ import langs from './i18n/langs.json'

export default createI18n({
  namespace: 'testNamespace',
+  locale: 'zh',
+  langs,
})

At this point, the project has been completely connected to internationalization. The above locale specifies any of the target language, and the translated content can be seen on the page. If there are new Translation Text (need to be wrapped with $t function) in the subsequent project, you only need to execute the translation command npx i18n t again to generate the latest language package

7. Switch Language

You can switch languages through $setI18n

Composition API

// App.tsx
<template>
  <div> {{ $t('hello world') }} </div>
+  <select
+    :value="$i18nState.locale"
+    @change="onSelectChange"
+  >
+    <option value="zh">简体中文</option>
+    <option value="en">English</option>
+    <option value="ja">日本語</option>
+  </select>
</template>
+
+ <script setup>
+ import { useI18n } from '@i18n-pro/vue'
+
+ const { setI18n } = useI18n()
+
+ onSelectChange(e){
+   setI18n({
+     locale: e.target.value,
+   })
+ }
+ </script>

Options API

// App.tsx
<template>
  <div> {{ $t('hello world') }} </div>
+  <select
+    :value="$i18nState.locale"
+    @change="onSelectChange"
+  >
+    <option value="zh">简体中文</option>
+    <option value="en">English</option>
+    <option value="ja">日本語</option>
+  </select>
</template>
+
+ <script>
+ export default {
+   methods: {
+     onSelectChange(e){
+       this.$setI18n({
+         locale: e.target.value,
+       })
+     },
+   }
+ }
+ </script>

8. Demo

Real code examples can refer to Live Demo in the README document