{"id":11544,"library":"petite-vue-i18n","title":"Petite Vue I18n","description":"petite-vue-i18n is a specialized, lightweight internationalization library for Vue 3 applications, offering a trimmed-down feature set compared to the full vue-i18n package. Currently at version 11.3.2, it maintains a regular release cadence with frequent bug fixes and minor improvements, often in sync with the main vue-i18n project. Its primary differentiation lies in its significantly smaller bundle size (up to 45% smaller for runtime-only builds) by exclusively supporting the Composition API and focusing solely on core translation capabilities. It omits features like date/number formatting ($n, $d), rich text rendering ($rt), hierarchical message handling out-of-the-box, the v-t directive, and components like i18n-t, making it ideal for projects where only basic text translation is required and bundle size is critical. Migration to the full vue-i18n is designed to be seamless if more features become necessary later.","status":"active","version":"11.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/intlify/vue-i18n","tags":["javascript","i18n","internationalization","intlify","lite","plugin","vue","vue.js","typescript"],"install":[{"cmd":"npm install petite-vue-i18n","lang":"bash","label":"npm"},{"cmd":"yarn add petite-vue-i18n","lang":"bash","label":"yarn"},{"cmd":"pnpm add petite-vue-i18n","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Vue.js 3 is a peer dependency as this is a plugin for Vue applications.","package":"vue","optional":false}],"imports":[{"note":"petite-vue-i18n is primarily designed for ESM environments. CommonJS require() is not the idiomatic way to import in modern Vue 3 projects.","wrong":"const createI18n = require('petite-vue-i18n')","symbol":"createI18n","correct":"import { createI18n } from 'petite-vue-i18n'"},{"note":"This Composition API hook is the primary method to access i18n functionalities within Vue 3 components.","wrong":"const { useI18n } = require('petite-vue-i18n')","symbol":"useI18n","correct":"import { useI18n } from 'petite-vue-i18n'"},{"note":"Importing the Composer type is useful for TypeScript users to type the return value of useI18n() explicitly.","symbol":"Composer","correct":"import type { Composer } from 'petite-vue-i18n'"}],"quickstart":{"code":"import { createApp } from 'vue'\nimport { createI18n, useI18n } from 'petite-vue-i18n'\n\nconst messages = {\n  en: {\n    'hello world': 'Hello world from petite-vue-i18n!',\n    'greeting': 'Welcome, {name}!',\n    'about': 'This is a lightweight i18n solution.'\n  },\n  fr: {\n    'hello world': 'Bonjour le monde de petite-vue-i18n !',\n    'greeting': 'Bienvenue, {name} !',\n    'about': 'Ceci est une solution i18n légère.'\n  }\n}\n\nconst i18n = createI18n({\n  locale: 'en',\n  fallbackLocale: 'fr',\n  messages\n})\n\nconst app = createApp({\n  setup() {\n    const { t, locale } = useI18n()\n    return { t, locale }\n  },\n  template: `\n    <div id=\"app\">\n      <h1>{{ t('hello world') }}</h1>\n      <p>{{ t('greeting', { name: 'User' }) }}</p>\n      <p>{{ t('about') }}</p>\n      <button @click=\"locale = 'fr'\">Switch to French</button>\n      <button @click=\"locale = 'en'\">Switch to English</button>\n    </div>\n  `\n})\n\napp.use(i18n)\napp.mount('#app')","lang":"typescript","description":"This example demonstrates how to set up `petite-vue-i18n` with `createI18n`, use the `useI18n` hook for translations (`t`), and dynamically switch locales in a Vue 3 application."},"warnings":[{"fix":"Migrate all i18n logic to use the Composition API's `useI18n()` hook, typically within a component's `setup` function or `<script setup>` block.","message":"petite-vue-i18n exclusively supports Vue 3's Composition API. Legacy Vue I18n Options API global properties like `$t` via `this` are not directly available without explicitly exposing `t` from `useI18n()` within setup.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Remove `v-t` directives. Translations in templates must be performed using interpolation, e.g., `{{ t('your.key') }}` after exposing `t` from `useI18n()`.","message":"The `v-t` custom directive for template translations is entirely omitted to reduce bundle size. It will not function and may cause errors if used.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Remove all calls to `$d`, `d`, `$n`, or `n`. If date/number formatting is required, you must migrate to the full `vue-i18n` package or implement custom formatting logic.","message":"DateTime (`$d`, `d`) and Number Formatting (`$n`, `n`) APIs are deliberately excluded from petite-vue-i18n. Attempting to use these will result in runtime errors.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Restructure your locale messages to be flat (e.g., `auth_login: '...'`) or implement a custom message resolver function when creating the i18n instance.","message":"By default, `petite-vue-i18n` handles only simple, flat key-value locale messages. Hierarchical messages (e.g., `messages.en.auth.login`) are not resolved without custom message resolver configurations.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Be aware of the strict array-order fallback. Ensure your `fallbackLocale` array reflects the precise fallback order desired.","message":"The local fallback algorithm strictly follows the array order specified in `fallbackLocale`. This differs from `vue-i18n`'s more flexible fallback strategies, which may check all available locales.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Remove all references to `$n` or `n`. petite-vue-i18n is translation-only. Use full vue-i18n if number formatting is needed.","cause":"Attempting to use the number formatting API (`$n` or `n`) which is excluded from petite-vue-i18n.","error":"Property '$n' does not exist on type 'I18n<MessageSchema, Locales, Values>'"},{"fix":"Replace `v-t` directives with template interpolations like `{{ t('your.key') }}` after exposing `t` from `useI18n()` in your component's setup function.","cause":"The `v-t` custom directive is not included in petite-vue-i18n.","error":"Failed to resolve directive: t"},{"fix":"Either flatten your locale messages (e.g., `auth_login: '...'`) or provide a custom message resolver function during `createI18n` initialization.","cause":"Attempting to access a nested translation key (e.g., `t('auth.login')`) when petite-vue-i18n's default resolver only supports flat keys.","error":"TypeError: Cannot read properties of undefined (reading 'nestedKey')"},{"fix":"Ensure you have `import { createApp } from 'vue'` and that `createApp()` is called to initialize your `app` constant before `app.use(i18n)`.","cause":"This usually indicates that `createApp` from 'vue' was not correctly imported or called, meaning `app` is not a valid Vue application instance.","error":"TypeError: app.use is not a function"}],"ecosystem":"npm"}