Replace usage of useContext with use...

[dhruvkb]

Description

Nuxt recommends the use of specific use... functions like useRoute, useRouter, useStore etc. instead of destructuring from useContext.

Additional context

These replacements will smooth the future upgrade to Vue 3 with Composition API.

Resolution

• 🙋 I would be interested in resolving this bug.

[obulat]

We had a problem with using route destructured from useContext not working correctly, and @krysal fixed it in #588.
Other than that, we seem to only use useContext for getting app (to get the i18n.localePath), i18n and store in the code. The i18n plugin will probably be imported using something like this:

import { useNuxtApp } from '#app'
  const { i18n } = useNuxtApp()

And the store can be imported using useStore(), but since we are planning to use Pinia later, it might not be worth the effort.

Are there instances of useContext that are causing problems, @dhruvkb ?

[dhruvkb]

I haven't looked at the individual usages. I just saw it being used extensively in the code and that it was not recommended so I opened the issue.

As for Pinia, I read somewhere that it will become Vuex 5 so they might retain the useStore construct. But yeah, it might not be worth the effort if they rename. Hence the "priority: low" and "good first issue" labels 😆 .

Also, none of the usages are causing problems, just wanted to align with Nuxt recommendations.

[obulat]

The recommendations are to not use useContext for route and router, other usages are OK (there is no alternative, actually). So, I would vote for closing this issue - if others agree.

[sarayourfriend]

@dhruvkb I think the latest guidance from the Vue project is to just switch to Pinia directly instead of waiting for Vuex 5:

https://twitter.com/VueDose/status/1463169464451706897

[sarayourfriend]

For this it would also be great to create our own useStore and useI18n hooks. Nuxt bridge does not have shims for useStore as present in Nuxt 2 and retriving the i18n object requires useNuxtApp().$i18n. For now we can continue to use useContext().i18n in that function and then the upgrade to Nuxt bridge will be easier because we can just swap the implementation.