SyntaxError: Need to install with app.use

[martinszeltins]

Reporting a bug?

When I try to use a translation, I get this error:

vue-i18n.js?v=bd326320:278 Uncaught (in promise) SyntaxError: Need to install with `app.use` function (at vue-i18n.js?v=bd326320:278:17)
    at createCompileError (vue-i18n.js?v=bd326320:278:17)
    at createI18nError (vue-i18n.js?v=bd326320:3650:10)
    at useI18n (vue-i18n.js?v=bd326320:5439:11)
    at setup (MyNotification.vue:11:19)
    at callWithErrorHandling (chunk-U6BEPC57.js?v=bd326320:1659:19)
    at setupStatefulComponent (chunk-U6BEPC57.js?v=bd326320:9073:25)
    at setupComponent (chunk-U6BEPC57.js?v=bd326320:9034:36)
    at mountComponent (chunk-U6BEPC57.js?v=bd326320:7363:7)
    at processComponent (chunk-U6BEPC57.js?v=bd326320:7329:9)
    at patch (chunk-U6BEPC57.js?v=bd326320:6795:11)

main.ts

import App from './App.vue'
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
    legacy: false,
    locale: 'en',
    fallbackLocale: 'en',
    messages: {
      en: {
          hello: 'hello world'
      },
    }
})

const app = createApp(App)

app.use(i18n)
app.mount('#app')

App.vue

<template>
    <div>
        <button @click="showNotification">
            Show Notification
        </button>
    </div>
</template>

<script setup lang="ts">
    import { h } from 'vue'
    import { toast } from 'vue3-toastify'
    import "vue3-toastify/dist/index.css"
    import MyNotification from './components/MyNotification.vue'

    const showNotification = () => {
        const vnode = h(MyNotification)

        toast(vnode, {
            type: 'info',
            closeOnClick: true,
            autoClose: false,
            hideProgressBar: true,
            position: toast.POSITION.TOP_CENTER,
        })
    }
</script>

components/MyNotification.vue

<template>
    <div>
        {{ message }}
    </div>
</template>

<script setup lang="ts">
    import { computed } from 'vue'
    import { useI18n } from 'vue-i18n'

    const { t } = useI18n()

    const message = computed(() => t('hello'))
</script>

Please see the reproduction link.

Expected behavior

It should work without errors.

Reproduction

https://stackblitz.com/edit/github-o1kzje?file=src%2Fcomponents%2FMyNotification.vue

System Info

`
  System:
    OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
    Memory: 13.11 GB / 31.05 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
    pnpm: 8.6.12 - /usr/local/bin/pnpm
    bun: 1.0.33 - ~/.bun/bin/bun
  Browsers:
    Chrome: 125.0.6422.60

### Screenshot

![image](https://github.com/intlify/vue-i18n/assets/34019878/734d195c-f532-4b24-945f-12dbf0bf9e8d)


### Additional context

_No response_

### Validations

- [X] Read the [Contributing Guidelines](https://github.com/intlify/vue-i18n/blob/master/.github/CONTRIBUTING.md)
- [X] Read the [Documentation](https://vue-i18n.intlify.dev/)
- [X] Check that there isn't [already an issue](https://github.com/intlify/vue-i18n/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussions](https://github.com/intlify/vue-i18n/discussions)

[lsewcx]

我也有同样的问题，到现在都没有解决，只能放弃这组件

[oleksandr-okuniev-onix]

Have the same error when using https://vue-tippy.netlify.app/props#content where also using h render function

[Alfred-wen]

在tsx 的setup 中使用，也会有这个问题。

[Briscer]

I use @nuxtjs/i18n with monaco-editor, When I used [email protected], it worked well, but when I upgraded monaco-editor to 0.52.0, the same error occurred, and I don't know which side is the cause.