kazupon / vue-i18n

:globe_with_meridians: Internationalization plugin for Vue.js

Home Page:https://kazupon.github.io/vue-i18n/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

VIte + Vue2 example

montella1507 opened this issue · comments

Clear and concise description of the problem

Please provide example of Vite + Vue2 solution, there is no way how to make this work :-/

Suggested solution

Small example with vite.config.js, tsconfig.base.json and 2 types of messages:

  • global
  • local in blocks

Alternative

No response

Additional context

No response

Validations

Simply switch Webpack's module.hot() to Vite's import.meta.hot().
I wish they should provide it in the docs too.
Here is a simple snippet for you :)

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from "@/locales/en.json";
import zhHans from "@/locales/zhHans.json";
import zhHant from "@/locales/zhHant.json";

Vue.use(VueI18n);

const messages = {
  en,
  zhHans,
  zhHant
}

const i18n = new VueI18n({
  locale: 'en',
  messages
})

// Hot updates
if (import.meta.hot) {
  import.meta.hot.on("locales-update", (data) => {
    i18n.setLocaleMessage('en', en.default)
    i18n.setLocaleMessage('zhHans', zhHans.default)
    i18n.setLocaleMessage('zhHant', zhHant.default)
  })
}
export default i18n;

how to use Lazy loading translations in vite + vue2 .
8.x not provide an example