vue-i18n-composable

Common errors

• Cannot read properties of undefined (reading 'mount')

  cause 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')

  cause 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.

  cause 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: {} })`.

Warnings

• breaking Vue 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`.
• gotcha When 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.
• gotcha The `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.

Install

• npm install vue-i18n-composable npm
• yarn add vue-i18n-composable yarn
• pnpm add vue-i18n-composable pnpm

Imports

• createI18n
  wrong:

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

  correct:

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

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

  import useI18n from 'vue-i18n-composable'

  correct:

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

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

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

  correct:

  import { defineComponent } from 'vue'

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

Quickstart

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')