Awesome

<div align="center"> <p style="font-size: 18px;">Lightweight, simple, flexible, automatic translation internationalization tool for Vue 2</p>

English | 简体中文

demo

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

Vision<br/> Requirement<br/> Features<br/> Live Demo<br/> Principle<br/> License<br/>

</details>

Vision

To make internationalization easy and enjoyable 😄💪🏻

Requirement

The current library is only applicable to Vue 2 . If you need to support Vue 3 , please click i18n-pro/vue to view

vue >= 2.0.0 < 3.0.0
i18n-pro >= 2.0.0

Features

lightweight： +
The following features are inherited from i18n-pro
- simple
- flexible
- automatic-translation
- keyless

Live Demo

with$ = true
- Open in CodeSandbox
with$ = false
- Open in CodeSandbox

Principle

This library is implemented based on i18n-pro combined with Vue 's Prototype Properties, Reactivity System and Plugin System

Mainly composed of 1 parts

createI18n

createI18n：Initialize internationalization state and return its plugin function

A simple example is as follows

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

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

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

Vue.use(i18n)

new Vue({
  el: '#app',
  render: h => h(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 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

Current Library
i18n-pro

License

MIT