SyntaxError: Need to install with `app.use`
martinszeltins opened this issue · comments
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)