petite-vue-i18n
Advanced tools
Small size subset of Vue I18n
petite-vue-i18n is an alternative distribution of Vue I18n, which provides only minimal features.
~32%, runtime only ~45%petite-vue-i18n: runtime + compiler ~9.61KB, runtime only ~5.51KB (production build, brotli compression)vue-i18n: runtime + compiler ~14.18KB, runtime only ~10.12KB (production build, brotli compression)~32%, runtime only ~45%petite-vue-i18n: runtime + compiler ~10.51KB, runtime only ~6.20KB (production build, brotli compression)vue-i18n: runtime + compiler ~15.40KB, runtime only ~11.12KB (production build, brotli compression)vue-i18n: ~10% (Code size check measurement of vue-i18n and petite-vue-i18n)n, $nd, $drt, $rttm, $tmgetDateTimeFormat, setDateTimeFormat, mergeDateTimeFormatgetNumberFormat, setNumberFormat, mergeNumberFormatfallbackLocalev-t isn’t includedvue-i18n aren’t included
i18n-ti18n-di18n-npetite-vue-i18nvue-i18n includes various i18n features such as translation, datetimes format and number formats. Some projects may only use translation and not datetime formats. At the moment, even in that case, the code for that feature is included.
If your project only uses t or $t API for translation, so we recommended you would use petite-vue-i18n better than vue-i18n. And your project needs the features of vue-i18n, you can smoothly migrate from petite-vue-i18n to vue-i18n. This means that it’s progressive enhancement.
Basically, it’s the same as installing vue-i18n. The only difference is that the part of URL or part of path are changed from vue-i18n to petite-vue-i18n.
You need to insert the following scripts to end of <head>:
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/petite-vue-i18n"></script>
The following is the application code with the script tag:
<script>
const { createApp } = Vue
const { createI18n } = PetiteVueI18n
const i18n = createI18n({
// something vue-i18n options here ...
})
const app = createApp({
// something vue options here ...
})
app.use(i18n)
app.mount('#app')
</script>
NPM:
npm install petite-vue-i18n --save
PNPM:
pnpm add petite-vue-i18n
Yarn:
yarn add petite-vue-i18n
import { createApp } from 'vue'
import { createI18n } from 'petite-vue-i18n'
const i18n = createI18n({
// something vue-i18n options here ...
})
const app = createApp({
// something vue options here ...
})
app.use(i18n)
app.mount('#app')
Template:
<div id="app">
<h1>{{ t('hello world') }}</h1>
</div>
Scripts:
const { createApp } = Vue
const { createI18n, useI18n } = PetiteVueI18n
// or for ES modules
// import { createApp } from 'vue'
// import { createI18n } from 'petite-vue-i18n'
const i18n = createI18n({
locale: 'en',
messages: {
en: {
'hello world': 'Hello world!'
},
ja: {
'hello world': 'こんにちは、世界！'
}
}
})
// define App component
const App = {
setup() {
const { t } = useI18n()
return { t }
}
}
const app = createApp(App)
app.use(i18n)
app.mount('#app')
vue-i18nIn petite-vue-i18n, the message resolver and locale fallbacker use simple implementations to optimize code size, as described in the differences section, as the belows:
fallbackLocaleIf you want to use the same message resolver and locale fallbacker as vue-i18n, you can change them using the API.
Note that at this time, only bundlers like vite and webpack are supported.
You need to install @intlify/core-base to your project with package manager.
npm install --save @intlify/core-base
# for pnpm
# pnpm add @intlify/core-base
# for yarn
# yarn add @intlify/core-base
Then, at the entry point of the application, configure the message resolver and locale fallbacker using the API as the below:
import { createApp } from 'vue'
import { createI18n } from 'petite-vue-i18n'
import {
registerMessageResolver, // register the message resolver API
resolveValue, // message resolver of vue-i18n which is used by default
registerLocaleFallbacker, // register the locale fallbacker API
fallbackWithLocaleChain // locale fallbacker of vue-i18n which is used by default
} from '@intlify/core-base'
// register message resolver of vue-i18n
registerMessageResolver(resolveValue)
// register locale fallbacker of vue-i18n
registerLocaleFallbacker(fallbackWithLocaleChain)
// some thing code ...
// ...
With the above settings, locale message resolving and locale fallbacking will be handled in the same way as in vue-i18n, note that the code size will increase slightly.
You can switch from vue-i18n to petite-vue-i18n in your application using npm alias without changing the import ID.
Package.json:
{
// ...
"dependencies": {
"vue": "^3.4.14",
- "vue-i18n": "^10.0.0"
+ "vue-i18n": "npm:petite-vue-i18n@^10.0.0"
},
}
You need @intlify/unplugin-vue-i18n to build your application.
FAQs
Vue I18n lite version
The npm package petite-vue-i18n receives a total of 3,176 weekly downloads. As such, petite-vue-i18n popularity was classified as popular.
We found that petite-vue-i18n 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
Malicious Koishi plugin silently exfiltrates messages with hex strings to a hardcoded QQ account, exposing secrets in chatbots across platforms.
Research
Security News
Malicious PyPI checkers validate stolen emails against TikTok and Instagram APIs, enabling targeted account attacks and dark web credential sales.
Security News
The Node.js TSC opted not to endorse a feature bounty program, citing concerns about incentives, governance, and project neutrality.