🌐 Lightweight internationalization plugin for Vue 3

Overview

🔥️ vue-next-i18n

Gzip Size

Lightweight internationalization plugin for Vue 3

🌈 Getting started

To begin, you'll need to install vue-next-i18n

use npm

npm install vue-next-i18n

use yarn

yarn add vue-next-i18n

🚀 Usage

When using with a module system, you must explicitly install the vue-next-i18n via app.use():

// 1. Ready translated locale messages
// The structure of the locale message is the hierarchical object structure with each locale as the top property
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  zhCHS: {
    message: {
      hello: '你好 世界'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}

// 2. Create i18n instance with options
import { createApp } from 'vue';
import { createI18n } from 'vue-next-i18n';

const i18n = createI18n({
  locale: 'zhCHS', // set locale, depend on messages object structure keys
  messages, // set locale messages
  localeKeys:['zhCHS','zhCHT','en'] //Not required default: ['zhCHS','zhCHT','en']
})


// 3. Create a vue root instance
const app = createApp({
  // set something options
  // ...
})

// 4. Install i18n instance to make the whole app i18n-aware
app.use(i18n)

// 5. Mount
app.mount('#app')

// Now the app has started!

HTML

{{ $t("message.hello") }}

">

  

{{ $t("message.hello") }}

你好 世界

">


  

你好 世界

🚌 Composition API

import { useI18n } from 'vue-next-i18n'

export default {
  setup() {
    const i18n = useI18n()
    const { currentLocale, changeLocale } = i18n
    return {
      currentLocale,
      changeLocale
    }
  }
}

📦 Examples

basic

{{ $t("message.hello") }}

">
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  zhCHS: {
    message: {
      hello: '你好 世界'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}


  

{{ $t("message.hello") }}

support function translation

{{ $t("message.hello",'hahaha') }}

">
const messages = {
  en: {
    message: {
      hello: (val) =>  `hello world ${val}`
    }
  },
  zhCHS: {
    message: {
      hello: (val) =>  `你好 世界 ${val}`
    }
  },
  ja: {
    message: {
      hello: (val) =>  `こんにちは、世界 ${val}`
    }
  }
}


  

{{ $t("message.hello",'hahaha') }}

use array messages

The array order depends on the localeKeys, default value is ['zhCHS','zhCHT','en']

{{ $t(['你好 世界','hello world','こんにちは、世界']) }}

">
// example localeKeys: ['zhCHS','en','ja']


  

{{ $t(['你好 世界','hello world','こんにちは、世界']) }}

use i18n option in component

{{ $t('message.hello') }}

">
export default {
  i18n:{
    en: {
      message: {
        hello: 'hello world'
      }
    },
    zhCHS: {
      message: {
        hello: '你好 世界'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、世界'
      }
    } 
  },
  setup(){
    // code...
  }
}


  

{{ $t('message.hello') }}

📜 Changelog

Details changes for each release are documented in the CHANGELOG.md.

📄 License

MIT License © 2022 Aaron Lam

You might also like...

Lightweight UI components for Vue.js based on Bulma

Lightweight UI components for Vue.js based on Bulma

Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design. Features Keep your current Bulma theme / va

Jan 8, 2023

Simple, lightweight model-based validation for Vue.js

Simple, lightweight model-based validation for Vue.js

vuelidate Simple, lightweight model-based validation for Vue.js Sponsors Gold Silver Bronze Features & characteristics: Model based Decoupled from tem

Jan 3, 2023

A lightweight Vue.js UI library with a simple API, inspired by Google's Material Design.

Keen UI Keen UI is a Vue.js UI library with a simple API, inspired by Google's Material Design. Keen UI is not a CSS framework. Therefore, it doesn't

Jan 2, 2023

Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.

vue-select Everything you wish the HTML select element could do, wrapped up into a lightweight, zero dependency, extensible Vue component. Vue Selec

Jan 2, 2023

An infinite scroll plugin for Vue.js.

Intro An infinite scroll plugin for Vue.js, to help you implement an infinite scroll list more easily. Features Mobile friendly Internal spinners 2-di

Jan 4, 2023

Vue2.x plugin to create scoped or global shortcuts. No need to import a vue component into the template.

vue2-shortcut Vue2.x plugin to create scoped or global shortcuts. No need to import a vue component into the template. Install $ npm install --save vu

Aug 14, 2022

Vue 3 + Vite + SSR template based on Vite Plugin SSR and inspired by Vitesse

Vite Vue SSR Starter Vue 3 + Vite + SSR template based on Vite Plugin SSR and inspired by Vitesse Features ⚡️ Vue 3, Vite 2, TypeScript 🗂 Domain-Driv

Aug 2, 2022

A simple picture clipping plugin for vue

A simple  picture clipping plugin for vue

vue-cropper 一个优雅的图片裁剪插件 [ 查看演示 Demo ] [ README_english ] [ 更新日志 ] 一、安装使用 1. 安装 # npm 安装 npm install vue-cropper # yarn 安装 yarn add vue-cropper 如果你没有使用

Jan 5, 2023

📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Jan 9, 2023
Releases(v1.0.13)
:globe_with_meridians: Internationalization plugin for Vue.js

vue-i18n Internationalization plugin for Vue.js ?? Gold Sponsors ?? Silver Sponsors ?? Bronze Sponsors ⚠️ NOTICE This repository is for Vue I18n v8.x.

kazuya kawaguchi 6.9k Jan 8, 2023
A plugin that can help you create project friendly with Vue for @vue/cli 4.5

vue-cli-plugin-patch A plugin that can help you create project friendly with Vue for @vue/cli 4.5. Install First you need to install @vue/cli globally

null 2 Jan 6, 2022
:tada: A magical vue admin https://panjiachen.github.io/vue-element-admin

English | 简体中文 | 日本語 | Spanish SPONSORED BY 活动服务销售平台 客户消息直达工作群 Introduction vue-element-admin is a production-ready front-end solution for admin inter

花裤衩 80.1k Dec 31, 2022
:eyes: Vue in React, React in Vue. Seamless integration of the two. :dancers:

vuera NOTE: This project is looking for a maintainer! Use Vue components in your React app: import React from 'react' import MyVueComponent from './My

Aleksandr Komarov 4k Dec 30, 2022
🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus 的后台管理系统vue3-element-admin

vue3-element-admin ?? 基于 Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus 的后台管理系统 简介 vue3-element-admin 是一个后台前端解决方案,它基于 vue3 和 element-plu

雪月欧巴 84 Nov 28, 2022
Jenesius vue modal is simple library for Vue 3 only

Jenesius Vue Modal Jenesius vue modal is simple library for Vue 3 only . Site Documentation Installation npm i jenesius-vue-modal For add modals in yo

Архипцев Евгений 63 Dec 30, 2022
A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.

Azure Static Web App Template with Node.js API This is a template repository for creating Azure Static Web Apps that comes pre-configured with: Vue.js

Marc Duiker 6 Jun 25, 2022
Mosha-vue-toastify - A light weight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.

Mosha Vue Toastify A lightweight and fun Vue 3 toast or notification or snack bar or however you wanna call it library. English | 简体中文 Talk is cheap,

Baidi Liu 187 Jan 2, 2023
Veloce: Starter template that uses Vue 3, Vite, TypeScript, SSR, Pinia, Vue Router, Express and Docker

Veloce Lightning-fast cold server start Instant hot module replacement (HMR) and dev SSR True on-demand compilation Tech Stack Vue 3: UI Rendering lib

Alan Morel 10 Oct 7, 2022
Lightweight Mobile UI Components built on Vue

Vant Mobile UI Components built on Vue ?? 文档网站(国内) ?? 文档网站(GitHub) ???? 中文版介绍 Features 65+ Reusable components 1kb Component average size (min+gzip) 9

有赞 20.7k Dec 31, 2022