vue-i18n-bridge
Advanced tools
A bridge for Vue I18n Legacy
vue-i18n-bridge?vue-i18n-bridge is a bridge to make the upgrade as easy as possible between vue-i18n@v8.26.1 or later and vue-i18n@v9.x.
It can be used in Vue 2 applications that you have already built with vue-i18n@v8.26.1 or later.
And, also some features are backported from vue-i18n@v9.x:
@vue/composition-api@intlify/message-compiler# npm
npm install vue-i18n-bridge
# yarn
yarn add vue-i18n-bridge
# pnpm
pnpm add vue-i18n-bridge
You must install the below packages before using this library:
Include vue-i18n-bridge after vue, @vue/composition-api and it will install.
<script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api@1.2"></script>
<script src="https://unpkg.com/vue-i18n-bridge@9.2.0-beta.30/dist/vue-i18n-bridge.global.prod.js"></script>
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import VueCompositionAPI, { createApp } from '@vue/composition-api'
import { createI18n, useI18n } from 'vue-i18n-bridge'
Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true }) // you must specify '{ bridge: true }' plugin option when install vue-i18n
// `createI18n` options is almost same vue-i18n-next (vue-i18n@v9.x) API
const i18n = createI18n({
legacy: false,
locale: 'ja',
messages: {
en: {
message: {
hello: 'hello, {name}!'
}
},
ja: {
message: {
hello: 'こんにちは、{name}！'
}
}
}
}, VueI18n) // `createI18n` which is provide `vue-i18n-bridge` has second argument, you **must** pass `VueI18n` constructor which is provide `vue-i18n`
const app = createApp({
setup() {
// `useI18n` options is almost same vue-i18n-next (vue-i18n@v9.x) API
const { t, locale } = useI18n()
// ... todo something
return { t, locale }
}
})
app.use(i18n) // you must install `i18n` instance which is created by `createI18n`
app.mount('#app')
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import VueCompositionAPI from '@vue/composition-api'
import { createI18n, useI18n } from 'vue-i18n-bridge'
Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true }) // you must specify '{ bridge: true }' plugin option when install vue-i18n
// `createI18n` options is almost same vue-i18n-next (vue-i18n@v9.x) API
const i18n = createI18n({
locale: 'ja',
messages: {
en: {
message: {
hello: 'hello, {name}!'
}
},
ja: {
message: {
hello: 'こんにちは、{name}！'
}
}
}
}, VueI18n) // `createI18n` which is provide `vue-i18n-bridge` has second argument, you **must** pass `VueI18n` constructor which is provide `vue-i18n`
Vue.use(i18n) // you must install `i18n` instance which is created by `createI18n`
const app = new Vue({ i18n })
app.$mount('#app')
For TypeScript:
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import VueCompositionAPI from '@vue/composition-api'
import { createI18n, useI18n, castToVueI18n } from 'vue-i18n-bridge'
Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true })
const i18n = castToVueI18n(
createI18n(
{
locale: 'ja',
messages: {
en: {
message: {
hello: 'hello, {name}!',
},
},
ja: {
message: {
hello: 'こんにちは、{name}！',
},
},
},
},
VueI18n
)
)
Vue.use(i18n)
const app = new Vue({ i18n }) // you need to cast `i18n` instance
app.$mount('#app')
const { createApp } = VueCompositionAPI // exported UMD which is named by `VueCompositionAPI
const { createI18n, useI18n } = VueI18nBridge // exported UMD which is named by `VueI18nBridge`
Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true })
vue-i18n-next
<i18n><i18n-n>In the dist/ directory of the npm package you will find many different builds of vue-i18n-bridge. Here is an overview of which dist file should be used depending on the use-case.
vue-i18n-bridge(.runtime).global(.prod).js:
<script src="..."> in the browser. Exposes the VueI18nBridge globalvue-i18n-bridge.global.js is the "full" build that includes both the compiler and the runtime so it supports compiling message formats on the flyvue-i18n-bridge.runtime.global.js contains only the runtime and requires message formats to be pre-compiled during a build step*.prod.js files for production⚠️ NOTE: Global builds are not UMD builds. They are built as IIFEs and are only meant for direct use via
<script src="...">.
vue-i18n-bridge(.runtime).esm-browser(.prod).js:
<script type="module">)vue-i18n-bridge(.runtime).esm-bundler.js:
webpack, rollup and parcelprocess.env.NODE_ENV guards (must be replaced by bundler)@intlify/core-base, @intlify/message-compiler)
esm-bundler builds and will in turn import their dependencies (e.g. @intlify/message-compiler imports @intlify/shared)vue-i18n-bridge.runtime.esm-bundler.js is runtime only, and requires all locale messages to be pre-compiled. This is the default entry for bundlers (via module field in package.json) because when using a bundler templates are typically pre-compiled (e.g. in *.json files)vue-i18n-bridge.esm-bundler.js (default): includes the runtime compiler. Use this if you are using a bundler but still want locale messages compilation (e.g. templates via inline JavaScript strings). To use this build, change your import statement to: import { createI18n } from "vue-i18n-bridge/dist/vue-i18n-bridge.esm-bundler.js";⚠️ NOTE: If you use
vue-i18n-bridge.runtime.esm-bundler.js, you will need to precompile all locale messages, and you can do that with.json(.json5) or.yaml, i18n custom blocks to manage i18n resources. Therefore, you can be going to pre-compile all locale messages with bundler and the following loader / plugin.
vue-i18n-bridge.cjs(.prod).js:
require()target: 'node' and properly externalize vue-i18n-bridge, this is the build that will be loadedprocess.env.NODE_ENVv9.7.0 (2023-11-16T07:45:49Z)
This changelog is generated by GitHub Releases
<!-- Release notes generated using configuration in .github/release.yml at v9.7.0 -->Full Changelog: https://github.com/intlify/vue-i18n-next/compare/v9.6.5...v9.7.0
FAQs
A bridge for Vue I18n Legacy
The npm package vue-i18n-bridge receives a total of 3,454 weekly downloads. As such, vue-i18n-bridge popularity was classified as popular.
We found that vue-i18n-bridge demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.