Registry / web-framework / vue-i18n-composable

vue-i18n-composable

library2.0.0jsnpmunverified

vue-i18n-composable is a library that brings the Composition API pattern for internationalization (i18n) to Vue 2.x applications, specifically integrating with the popular `vue-i18n` library. Its current stable version is `2.0.0`, released in July 2022, which introduced direct support for Vue 2.7 without requiring the `@vue/composition-api` plugin. Previous versions, such as `v1.0.0`, targeted Vue 2.5 and 2.6 and necessitated the `@vue/composition-api` plugin. The package does not adhere to a strict time-based release cadence, with major versions often tied to critical Vue lifecycle updates or feature enhancements. It differentiates itself by allowing developers to leverage modern `setup` functions and `useI18n` composables within Vue 2 projects, offering a forward-looking development experience without the need for a full migration to Vue 3. This is particularly useful for large legacy Vue 2 applications aiming to incrementally modernize their codebase, and it is an official part of the Intlify ecosystem, which also maintains `vue-i18n` itself.

web-framework communication

npm install vue-i18n-composable

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-I18N-COMPOSABL

vue-i18n-composable

web-frameworkjavascriptv2.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

createI18n

✓ import { createI18n } from 'vue-i18n-composable'

✗ const { createI18n } = require('vue-i18n-composable')

Used to create the i18n instance. This library is ESM-first and ships types, so prefer `import` syntax.

useI18n

✓ import { useI18n } from 'vue-i18n-composable'

✗ import useI18n from 'vue-i18n-composable'

The primary composable for accessing i18n functionality within Vue components. It's a named export.

defineComponent

✓ import { defineComponent } from 'vue'

✗ import { defineComponent } from '@vue/composition-api'

For Vue 2.7+, `defineComponent` is imported directly from 'vue'. For Vue 2.5-2.6, it must be imported from '@vue/composition-api'.

Demonstrates initializing `vue-i18n-composable` with `createI18n` and using `useI18n` within a Vue 2.7 `defineComponent` setup function to display translated text and change locales dynamically.

import Vue from 'vue' import { createI18n } from 'vue-i18n-composable' import { defineComponent } from 'vue' // For Vue 2.7+ const i18n = createI18n({ locale: 'en', messages: { en: { greeting: 'Hello from Composition API!', language: 'English' }, ja: { greeting: 'コンポジションAPIからのこんにちは！', language: '日本語' } } }) const App = defineComponent({ template: ` <div> <h1>{{ t('greeting') }}</h1> <p>Current Language: {{ t('language') }}</p> <button @click="setLocale('ja')">Switch to Japanese</button> <button @click="setLocale('en')">Switch to English</button> </div> `, setup() { const { t, locale } = useI18n() const setLocale = (lang) => { locale.value = lang } return { t, setLocale } } }) const app = new Vue({ render: h => h(App), i18n }) app.$mount('#app')

Debug

Known issues

breakingVue version compatibility changed between v1 and v2. v1.x supports Vue 2.5-2.6, requiring `@vue/composition-api`. v2.x supports Vue 2.7+, which has native Composition API support and does not require the plugin.

fix

For Vue 2.7+, upgrade to `vue-i18n-composable@2.x` and remove `@vue/composition-api`. For Vue 2.5-2.6, use `vue-i18n-composable@1.x` and install `@vue/composition-api`.

affects: >=1.0.0 <2.0.0

gotchaWhen using `vue-i18n-composable` with Vue 2.5 or 2.6, you must explicitly install and `Vue.use()` the `@vue/composition-api` plugin before creating your Vue app.

fix

Run `npm i @vue/composition-api` and add `import VueCompositionAPI from '@vue/composition-api'; Vue.use(VueCompositionAPI);` to your `main.js` or entry file.

affects: <2.0.0

gotchaThe `defineComponent` import source varies based on your Vue 2.x version. For Vue 2.7+, it's imported from 'vue'. For Vue 2.5-2.6, it comes from '@vue/composition-api'.

fix

Adjust your `defineComponent` import based on your specific Vue 2.x patch version: `import { defineComponent } from 'vue'` for 2.7+, and `import { defineComponent } from '@vue/composition-api'` for 2.5-2.6.

affects: >=1.0.0

Errors

Common errors & fixes

Cannot read properties of undefined (reading 'mount')

Attempting to use `createApp` from `@vue/composition-api` for mounting a Vue 2.7+ application without correctly initializing Vue.

fix

For Vue 2.7+, use `const app = new Vue({ ... }); app.$mount('#app');`. The `createApp` utility is only relevant for Vue 2.5-2.6 when using `@vue/composition-api`.

TypeError: Cannot read properties of undefined (reading 't')

The `useI18n()` composable was called outside of a Vue component's `setup` function or an equivalent Composition API context, or the `i18n` instance was not properly provided to the Vue app.

fix

Ensure `useI18n()` is called within a `setup` function and that the `i18n` instance created by `createI18n` is passed to the root Vue instance configuration (`new Vue({ i18n, ... })`).

Error: [vue-i18n] 'messages' property is missing in 'createI18n' options.

The `messages` property, which defines the translation dictionary, was not provided in the options object passed to `createI18n`.

fix

Ensure the `createI18n` function receives an options object with at least an empty `messages` property, e.g., `createI18n({ locale: 'en', messages: {} })`.

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

vuerequiredPeer dependency, specifies Vue 2.x compatibility. v2.x of this package requires Vue >=2.7 <3.

vue-i18nrequiredCore internationalization library that this package builds upon. Peer dependency >=8 <9.

@vue/composition-apioptionalRequired for Vue 2.5 - 2.6 compatibility to enable Composition API features. Not needed for Vue 2.7+.

Agent activity

27 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/intlify/vue-i18n-composable ↗

packagehttps://www.npmjs.com/package/vue-i18n-composable ↗