useI18n(); in setup function throws error

[karladler]

calling useI18n() in composition API setup creates an error, since I updated my versions.

import { useI18n } from 'vue-i18n-composable';
// ... 

export default defineComponent({
  // ...
  setup(props) {
    const { t } = useI18n();

creates this:

[Vue warn]: Error in data(): "Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function."

Versions:
vue-i18n: 8.26.5
vue-i18n-composable@npm:0.2.2

main.ts (minimal version)

import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';
import de from '../locales/de.json';
import { createI18n } from 'vue-i18n-composable';

Vue.use(VueCompositionApi);

const i18n = createI18n({
  silentFallbackWarn: true,
  locale:  'de',
  fallbackLocale: 'de',
  messages: { de },
});

new Vue({
  render: (h) => h(App),
  i18n,
}).$mount('#app');

Is this still the correct way to use i18n programatically?

Edit: updated usage if of useI18n(); and added main.ts

[xitrox]

Struggling with the same problem.
Also it's the same behavior for me when I use the example and just:
setup() { return { ...useI18n() } }

Would like to add more value to this but can't since I'm also using the same versions.

[cyio]

@karladler @xitrox

solved problem for me

import { useI18n } from 'vue-i18n-composable/src/index'

import { createI18n } from 'vue-i18n-composable/src/index'

[bigbossx]

Has anyone solved this problem？Struggling with the same problem when i run example in this project.
I think that if the example on the repository cannot run normally, at least they should be marked as unavailable first, otherwise it will cause a lot of confusion.

maybe fix by #15

[Hienphamthe]

the trick from @cyio works for me

[bigbossx]

see vuejs/composition-api#837

[nagisaando]

In my case, I was using script setup and import { useI18n } from 'vue-i18n-composable' was working okay, but started throwing the error in testing, and I changed the path as @cyio suggested and ta-da! Now it's working perfectly, thank you!

[kingyue737]

I also meet this error in vitest

[nagisaando]

@kingyue737 Did you try #14 (comment)? I am using vitest as well, but changing path in all vue files fixed error

[kingyue737]

Thanks @nagisaando , it should work. But I don't want to directly import source code from package. I would have liked to migrate to vue-i18n-bridge which seems to have a valid export field in package.json (so won't have the bug mentioned in this issue), but I found vue-i18n v9 and vue-i18n-bridge do not support using both option api and composition api in one project.

Finally, I modify the package.json file of vue-i18n-composable by patch-package to fix bug. It's a good way to patch packages no longer maintained.

[dawid-polak]

I solved this problem by installing the latest version of i18n.
command: npm install vue-i18n@9