How to use with Nuxt Color module

[baixiaoyu2997]

Reproduction

repo: https://codesandbox.io/s/qpc7r?file=/pages/index.vue

Expected behavior

use storeToRefs return store

Actual behavior

use storeToRefs return undefined, but toRefs is success

[Rigo-m]

Same issue here. It's worth noting that calling toRefs on a store says that toRefs is getting used on a non reactive object.

[posva]

I tried reproducing this at https://github.com/piniajs/example-nuxt-bridge with no success (your repro is too complex). One thing to note is that theme should probably be

  const theme = toRef(useNuxtApp().vue2App.$colorMode, 'preference')

The use of reactive in your example is not correct and could be the reason it fails.

If you can use my example to reproduce it, I can take a look but keep in mind you are using multiple other libraries.

[Rigo-m]

I'll pop in a repro link as soon as I can

[baixiaoyu2997]

I tried reproducing this at https://github.com/piniajs/example-nuxt-bridge with no success (your repro is too complex). One thing to note is that theme should probably be

  const theme = toRef(useNuxtApp().vue2App.$colorMode, 'preference')

The use of reactive in your example is not correct and could be the reason it fails.

If you can use my example to reproduce it, I can take a look but keep in mind you are using multiple other libraries.

hi ,i test with const theme = toRef(useNuxtApp().vue2App.$colorMode, 'preference'), when code like this, can't change theme even with toRefs。and i simplified repo with new url: https://codesandbox.io/s/qpc7r?file=/pages/index.vue

Notice: $colorMode module will set preference or $colorMode object after mounted

test flow:

1. click one button to choose theme
2. refresh page
3. the theme is not displayed

[posva]

The problem seems to come from an incompatibility between Vue 3 and @vue/composition-api. I opened vuejs/composition-api#844. Basically storeToRefs() doesn't work in Vue 2 yet.

Note: Ideally nuxt color module should expose some useColorPreference() function to be used in the store or in any component because doing useNuxtApp().vue2App.$colorMode is hacky and will break when migrating to Vue 3 (this is unrelated to Pinia). I also saw they are working on a version compatible with Nuxt 3.