Nuxt•3mo ago

Calling `useRoute` within "middleware may lead to misleading results" when watching "locale"

Console warning when watching locale in a useAsyncData call. console warning: "index.vue:17 [nuxt] Calling useRoute within middleware may lead to misleading results. Instead, use the (to, from) arguments passed to the middleware to access the new and old routes." I am using this call to query nuxt-content and watching the locale to auto refetch

const { data } = await useAsyncData(
  'some-id',
  () => {
    return queryContent()
      .where({ _locale: locale.value,    _extension: { $eq: 'yml' }, _path: {       $contains: 'some-path' } })
      .findOne()
  },
  {
    watch: [locale]
  }
)

const { data } = await useAsyncData(
  'some-id',
  () => {
    return queryContent()
      .where({ _locale: locale.value,    _extension: { $eq: 'yml' }, _path: {       $contains: 'some-path' } })
      .findOne()
  },
  {
    watch: [locale]
  }
)

But when I change the locale I get the warning posted above. Is this safe to ignore? I only get the error when changing the locale with 'switchLocalePath', not when I manually change the locale, but then I lose out on lazy loading and need to manually update the route.path

2 Replies

pyplacca•3mo ago

I don't think you even need to watch the locale. Changes to the locale will trigger a rerender of the page

dwol•3mo ago

I will give this a try. I was able to get rid of the warning by using ‘setLocale’ instead of ‘switchLocalePath’. I just find it strange this causes a route middleware warning.

Gaming

Programming

Calling `useRoute` within "middleware may lead to misleading results" when watching "locale"