Providing computed values from plugin
I am trying to provide a computed value from a plugin, and I'm not sure why it's not working. I have two plugins here:
https://stackblitz.com/edit/github-vcbsj4-pqa2gg?file=plugins%2F0.init.ts,app.config.ts,app.vue,plugins%2F1.other.ts
The 0.init is commented out, but works as expected when uncommented. It uses app config which is reactive.
The 1.other is the plugin I'm working on returns a computed. In the app, I don't see the value change.
Hoping this is something obvious.
StackBlitz
Nuxt - Starter (forked) - StackBlitz
Create a new Nuxt project, module, layer or start from a theme with our collection of starters.
13 Replies
ok, I must have been mistaken because 0.init does not work either
Works fine. Check that a) you're not enabling both at the same time, and b) when you're disabling either one, ensure you're using the ignore prefix i.e. (
-1.other.ts) or comment out the plugin content not the exported member itself.ok
i'll try to reproduce what i'm seeing.
https://stackblitz.com/edit/github-vcbsj4-cu35vf?file=app.vue
Here is the issue I see, even though the template is showing the false value after clicking and accepting the terms, the layout doesn't re-render it seems
David Marr
StackBlitz
Nuxt - Starter (forked) - StackBlitz
Create a new Nuxt project, module, layer or start from a theme with our collection of starters.
if i move the computed into the layout it works. but i was trying to centralize the logic in the plugin
updated the example. still having issue - is there something i'm missing about reactivity or how plugins expose reactive variables here?
gonna ask in the vue discord because even this simple composable example isn't doing what i expect:
https://play.vuejs.org/#__DEV__eNplkcFuwyAMhl/F4tJM6pJ7l07bZS8xdkgp0dAaQGCyTVHefQajNtVyILL9/7b5WMSr9+2ctDiIPqpgPELUmPyztGbyLiAsEPS4p2NQaGYNK4zBTbAj024jSlG/OXetth1FLcbdk7TSKmcjwkj1YxU2D1QYk6WezkLy5wF18wCLtJB1bc0scBrCATAkGpwta27Xd7wqLUkB6slfSEwRwLIUuw/O64BGR1jJAtCfEiJNelEXo76OUvAAKYoLoKSLsGNlyfce5kczkvy+aUtbVavE3+TZmKH13XUdsRfMgNheMSk3+YT6nIES1e8B1ecd0sJL/xT5jU9lxnyY5uaKx9ysKbVCj4HlsDADKmMKlt2wce45UWHPwyXpWIdwqwDNbRoYC/8023Ztqb7nxActxVoOyxr5K69Rf3SsYv0DsbvcCA==
ok, maybe there is something with layouts that don't support v-if conditionals?
https://stackblitz.com/edit/github-lir3vn?file=layouts%2Fdefault.vue,pages%2Findex.vue
The
properties value is a ref. It updates, but the layout doesn't react to the change.StackBlitz
Nuxt - Starter - StackBlitz
Create a new Nuxt project, module, layer or start from a theme with our collection of starters.
gonna file a nuxt issue for ^
tldr; use useState for shared ref
ok, just replied to issue - but maybe I got this one wrong?
as far as I could tell you were mutating one ref but the other ref was completely independent
I updated the stackblitz with your suggestion. thank you
and works as you wish?
yes. i was just learning the ways of refs in vue 3 and didn't realize that you have to destructure them to retain the reactivity
Now that I understand how useState works, I will verify if that still holds true with nuxt
verified, it does.
the basic vue 3 reactivity destructuring example:
https://play.vuejs.org/#__DEV__eNplkc1OwzAQhF9l5AupFJJ7SRFceAnCIU0dYdHYlr0uoCjvzvqHpogcYq13ZnfyZRHP1jaXIMVedH50yhK8pGAfe61maxxhQfDyxRismJyZcde0XDXk7x563evRaJ9E9jSQ3JeTFTWsM1Y6UtKz91DGVDu2TUGPpIwu6mqHpdfYvNWC4+D2IBck1uhY466uzRE5HBckZ3tmPVfAsvxZx3KgOwYiXvI0ntX4cehFnt+L5ADSdRK2WZnuO4vLvZpYvg1sOE2x9fQdbDZFSF17jSFqkcEwyyu70cw2kDzVcHKq8TnQ+H4lydwzRPmV5BuWgipjyYhvPu8Qh1WpB0zGZFB1rBMscJ+C09mOG2vS/IKuLsM5SF+25FkO1bYOSuOf5nZck7qv8eKNU2VtLlOM+KRfUQ5+rWL9AR8/1ug=
composables that contain refs (or useState in nuxt) must be destructured for their properties to remain reactive. It's covered in the vue docs here: https://vuejs.org/guide/reusability/composables.html#conventions-and-best-practices
There is a workaround, to use
reactive like const foo = reactive(useFoo()) but then destructuring won't work. So... tldr, destructure when calling your composables for minimal fussComposables | Vue.js
Vue.js - The Progressive JavaScript Framework
apologies for the red herring.. but maybe a helpful callout when describing useState in the nuxt docs.
save futuredaniel™ some time answering questions