npm package: @i18n-pro/vue
Description: An out-of-the-box, lightweight i18n auto-translation solution for Vue
Author: Eyelly Wu
Latest version: 2.0.0

<div align="center">
  <p style="font-size: 18px;">An out-of-the-box, lightweight i18n auto-translation solution for Vue</p>

English | [简体中文](https://github.com/i18n-pro/vue/blob/v2.0.0/README_zh-CN.md)



[![npm-version](https://img.shields.io/npm/v/@i18n-pro/vue.svg?style=flat-square "npm-version")](https://www.npmjs.com/package/@i18n-pro/vue "npm")
[![npm-download](https://img.shields.io/npm/dm/@i18n-pro/vue "npm-download")](https://www.npmjs.com/package/@i18n-pro/vue "npm")

[![github-stars](https://img.shields.io/github/stars/i18n-pro/vue?style=social "github-stars")](https://github.com/i18n-pro/vue/stargazers "github-stars")
[![last-commit](https://img.shields.io/github/last-commit/i18n-pro/vue/main "last-commit")](https://github.com/i18n-pro/vue/commits/main "last-commit")
[![github-issues](https://img.shields.io/github/issues-raw/i18n-pro/vue "github-issues")](https://github.com/i18n-pro/vue/issues "github-issues")
[![codecov](https://codecov.io/gh/i18n-pro/vue/branch/main/graph/badge.svg?token=X2447V6A9H "codecov")](https://codecov.io/gh/i18n-pro/vue "codecov")

![demo](https://s3.bmp.ovh/imgs/2025/07/11/5b5ef272599ccbe3.gif)

</div>
<details >
  <summary>Table of Contents</summary>

  [Vision](#vision)<br/>
  [Requirement](#requirement)<br/>
  [Features](#features)<br/>
  [Live Demo](#live-demo)<br/>
  [Principle](#principle)<br/>
  [License](#license)<br/>

</details>


# Vision
Make internationalization easy and enjoyable 😄💪🏻

# Requirement

> The current library is only applicable to  `Vue 3` . If you need to support  `Vue 2` , please click  [i18n-pro/vue2](https://github.com/i18n-pro/vue2)  to view<br/>
* vue >= **3.2.25**
* i18n-pro >= **3.0.0** < **4.0.0**


# Features

* **lightweight**：[![bundlesize](https://img.shields.io/bundlephobia/minzip/i18n-pro?color=brightgreen&style=plastic "i18n-pro-bundlesize")](https://bundlephobia.com/package/i18n-pro "i18n-pro-bundlesize") + [![bundlesize](https://img.shields.io/bundlephobia/minzip/@i18n-pro/vue?color=brightgreen&style=plastic "bundlesize")](https://bundlephobia.com/package/@i18n-pro/vue "bundlesize")
* The following features are inherited from  [i18n-pro](https://github.com/i18n-pro/core "i18n-pro") 
   * **simple**
   * **flexible**
   * **automatic-translation**
   * **keyless**


# Live Demo

* with$ = true
   * [Open in CodeSandbox](https://codesandbox.io/p/github/i18n-pro/vue-demo/main?file=README.md)
   * [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg "Open in StackBlitz")](https://stackblitz.com/github/i18n-pro/vue-demo/tree/main?file=README.md)
* with$ = false
   * [Open in CodeSandbox](https://codesandbox.io/p/github/i18n-pro/vue-demo/simple?file=README.md)
   * [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg "Open in StackBlitz")](https://stackblitz.com/github/i18n-pro/vue-demo/tree/simple?file=README.md)


# Principle
This library is implemented based on  [i18n-pro](https://github.com/i18n-pro/core "i18n-pro")  combined with  `Vue` 's  `Global Properties, Reactivity System and Plugin System` 

Mainly composed of  `2`  parts
* createI18n
* useI18n



**createI18n**：Initialize internationalization state and return its plugin function<br />**useI18n**：Method to get internationalization state and API in  `Composition API` 



A simple example is as follows
```jsx
// App.vue
<template>
  {/** text-as-key */}
  <div>{{ $t('hello world') }}</div>
  {/** custom-key */}
  <div>{{ $t.t('custom-key', 'hello world') }}</div>
</template>

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

const i18n = createI18n({
  namespace: "i18n-example",
  locale: "en",
  langs: {
    zh: {
      'hello world': '你好世界',
      'custom-key': '你好世界',
    },
    ja:{
      "hello world": "こんにちは世界",
      'custom-key': 'こんにちは世界',
    },
  }
})

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

# Help Document

> To avoid unnecessary duplicate document content, some of the documents in this library are linked to the content in  `i18n-pro` <br/>
> The  `i18n-pro`  related link in the current document is based on the  `3.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<br/>
* Current Library
   * [Quick Start](https://github.com/i18n-pro/vue/blob/v2.0.0/docs/dist/USAGE.md)
   * [API](https://github.com/i18n-pro/vue/blob/v2.0.0/docs/dist/API.md)
   * [Changelog](https://github.com/i18n-pro/vue/blob/v2.0.0/docs/dist/CHANGELOG.md)
* i18n-pro
   * [Command Line](https://github.com/i18n-pro/core/blob/v3.0.0/docs/dist/COMMAND_LINE.md)
   * [Matching Rules](https://github.com/i18n-pro/core/blob/v3.0.0/docs/dist/MATCH_RULE.md)
   * [Q&A](https://github.com/i18n-pro/core/blob/v3.0.0/docs/dist/Q&A.md)
   * [Translation Log](https://github.com/i18n-pro/core/blob/v3.0.0/docs/dist/OUTPUT_LOG.md)


# License
[MIT](./LICENSE)

Copyright (c) 2023-present Eyelly Wu