Bug: Property "$t" was accessed during render but is not defined on instance.
paulschraven opened this issue · comments
Bug
Property "$t" was accessed during render but is not defined on instance. Page doesn't load.
(Global functions seem to not be working for some reason)
Module versions (please complete the following information):
- Vue CLI: 4.5.11
- vue-cli-plugin-i18n: 2.1
- vue-i18n: ^9.1.0 => 9.1.3 (8.24.3)
- vue: 3.0
To Reproduce
Steps to reproduce the behavior:
1.Create new project using vue create
2. cd into projuct
3. Install vue i18n using vue add
Ok, just fixed this by adding
globalInjection: true to the export default createI18n inside i18n.js
Honestly, I think this should be there by default, since all instructions assume it's there and directly assume you can use $t in code! :)
Cheers
Paul
Thank you for your feedback!
Oh, I'm glad to hear that response.
Happy coding! :)
I'm closing this issue, so I'll comment below!!
Honestly, I think this should be there by default, since all instructions assume it's there and directly assume you can use $t in code! :)
The reason globalInjection is not enabled by default in the Composition API (legacy: false), as I documented, is that implicitly using $t in a group (i.e. i18n resources are also global scope) causes the same problem as global variables.
https://vue-i18n.intlify.dev/guide/advanced/composition.html#implicit-with-injected-properties-and-functions
In small applications, this is not a problem, but in large applications, it makes it difficult to maintain the components. Even if you use global scope in your components, I recommend that you explicitly export t with useI18n in setup.
In Option API, i.e. Vue 2.x, this in a component could be injected using a Vue prototype.
The Composition API, provided in Vue 3, is designed to allow you to reuse the logic used in your components.
Using the Composition API to globally inject $t into a component means that you will not be able to take advantage of the Composition API.