N
Nuxt•2mo ago
Titan

Reactive Vuex store getter in plugin provide

Migrating a Nuxt 2 project so excuse the strange behaviour. Is there a way to make $app reactive here? 
export default defineNuxtPlugin(nuxtApp => {
  const { $store } = useNuxtApp()

  return {
    provide: {
      app: $store.getters['app/getApp']
    }
  }
})
export default defineNuxtPlugin(nuxtApp => {
  const { $store } = useNuxtApp()

  return {
    provide: {
      app: $store.getters['app/getApp']
    }
  }
})
inside a component script setup: 
const { $app } = useNuxtApp() 
console.log($app)
const { $app } = useNuxtApp() 
console.log($app)
$app is correctly showing the store response, but it's not up to date. I've tried wrapping it in a ref() but that didn't help: 
provide: {
  app: ref($store.getters['app/getApp'])
}
provide: {
  app: ref($store.getters['app/getApp'])
}
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Titan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing is related to reactivity loss when providing values from your Vuex store in a Nuxt plugin. This is a common challenge when migrating from Nuxt 2 to Nuxt 3, especially with Vuex integration. The problem is that you're providing a static value from your store getter, not a reactive reference to it. When the store updates, your provided value doesn't update because it's not maintaining the reactivity chain. Here's how you can fix it: 
export default defineNuxtPlugin(nuxtApp => {
  const { $store } = useNuxtApp()

  return {
    provide: {
      app: () => $store.getters['app/getApp']
    }
  }
})
export default defineNuxtPlugin(nuxtApp => {
  const { $store } = useNuxtApp()

  return {
    provide: {
      app: () => $store.getters['app/getApp']
    }
  }
})
By providing a function instead of a direct value, you're ensuring that each time $app is accessed, it will fetch the current value from the store. Then in your component: 
const { $app } = useNuxtApp() 
console.log($app())  // Note the function call
const { $app } = useNuxtApp() 
console.log($app())  // Note the function call
Alternatively, you could use computed to maintain reactivity: 
export default defineNuxtPlugin(nuxtApp => {
  const { $store } = useNuxtApp()

  return {
    provide: {
      app: computed(() => $store.getters['app/getApp'])
    }
  }
})
export default defineNuxtPlugin(nuxtApp => {
  const { $store } = useNuxtApp()

  return {
    provide: {
      app: computed(() => $store.getters['app/getApp'])
    }
  }
})
Then in your component: 
const { $app } = useNuxtApp() 
console.log($app.value)  // Access the .value of the computed ref
const { $app } = useNuxtApp() 
console.log($app.value)  // Access the .value of the computed ref
It's worth noting that Nuxt 3 officially recommends using Pinia instead of Vuex. If you're in the process of migrating, you might want to consider transitioning to Pinia as well, which has better TypeScript support and integration with the Composition API. Nuxt Migration Guide: Vuex provides more information about migrating from Vuex to Pinia. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@109997634327986176> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?