Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings
/ vue2 Public

Lightweight, simple, flexible, automatic translation internationalization tool for Vue 2

License

Notifications You must be signed in to change notification settings

i18n-pro/vue2

Open more actions menu

Repository files navigation

An out-of-the-box, lightweight i18n auto-translation solution for Vue

English | 简体中文

npm-version npm-download

github-stars last-commit github-issues codecov

demo

Table of Contents

Vision
Requirement
Features
Live Demo
Principle
License

Vision

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 >= 3.0.0 < 4.0.0

Features

  • lightweightbundlesize + bundlesize
  • The following features are inherited from i18n-pro
    • simple
    • flexible
    • automatic-translation
    • keyless

Live Demo

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>
  {/** text-as-key */}
  <div>{{ $t('hello world') }}</div>
  {/** custom-key */}
  <div>{{ $t.t('custom-key', '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': '你好世界',
      'custom-key': '你好世界',
    },
    ja:{
      "hello world": "こんにちは世界",
      'custom-key': 'こんにちは世界',
    },
  }
})

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
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

License

MIT

Copyright (c) 2023-present Eyelly Wu

Morty Proxy This is a proxified and sanitized view of the page, visit original site.