Nuxt UI v3 UModal: injection "Symbol(nuxt-ui.locale-context)" not found.
I recently updated Nuxt, Nuxt UI and Vue to the latest versions in order to update configurations according to latest documentation. Everything's working fine after the updates except
UModal component which shows the error: WARN [Vue warn]: injection "Symbol(nuxt-ui.locale-context)" not found. and refuses to update visibility.
Please is there anything I might have missed?6 Replies
Hi @Olamide. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the knowledge sources, I can see that you're encountering an issue with the UModal component from Nuxt UI after updating your dependencies.
The error message
injection "Symbol(nuxt-ui.locale-context)" not found suggests there might be a dependency version mismatch or an issue with how the component is being used.
Looking at the documentation, I notice a few potential issues:
1. The UModal component in Nuxt UI uses v-model rather than v-model:open for controlling visibility:
According to the Nuxt UI Modal documentation, the correct way to use the modal is with a simple v-model rather than v-model:open.
2. There might be version compatibility issues between your Nuxt, Vue, and Nuxt UI packages. This is a common issue after updates, as seen in some of the GitHub issues in the knowledge sources.
3. The error specifically mentions a locale context injection, which suggests there might be an issue with internationalization configuration or dependencies.
To resolve this issue:
1. Change your modal binding from v-model:open to v-model:
2. Check your package versions and make sure they're compatible. You might need to update or downgrade certain dependencies to ensure compatibility.
3. If you're using i18n, make sure it's properly configured according to the latest documentation.
4. Consider running npx nuxi@latest upgrade --force to ensure all Nuxt-related dependencies are properly updated.
If the issue persists, you might want to try using the UModals component programmatically as shown in the Control programmatically section of the documentation, which provides an alternative approach.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@957789387213656114> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@Olamide Hi! Did you manage to sort this out? I´m having a similar warning using the UBreadcrumb component in a recently updated installation of Nuxt. Everything renders ok, but I didn´t mannage yet to remove the warning. Comments would be appreciated. Thanks!
Hi @Jaun, I ended up writing a custom modal component. But I think wrapping your app with <UApp></UApp> should help. Let me know if that solves the problem for you.
It did indeed! The previous one was my first discord message ever. I haven´t been this happy for a while. Thank you very much!
Hi @Jaun congratulations on your first discord message ever! I'm glad you're able to solve the issue. Happy coding😊