Can't use in nuxt3

[shtse8]

[Vue warn]: Property "$nuxtDynamic" was accessed during render but is not defined on instance.

[aerophobic]

@shtse8 sorry for the late response here. the current version is compatible with nuxt v2 - a version compatible with nuxt v3 is in the works. I'll keep this issue open and notify you when it'll be ready.

[liamb13]

How’s this coming along @aerophobic? Do you need any support?

[aerophobic]

@liamb13 I'm indeed struggling to find a proper way to solve this in nuxt v3. Grabbing the components in the module to read (or generate) dynamic import paths is doable. But I can't get my head around on how to pass them to a plugin (or inject them in any other way to the context) to make use of them in the NuxtDynamic component.

Any ideas are welcome :)

[aerophobic]

@liamb13 & @shtse8: I found a way to do it. Had to rewrite the hydration part myself instead of using vue-lazy-hydration but I got a working prototype now. I'll test some more, clean everything up and provide a preversion for you guys.

How you'd like the idea handling hydration as following instead of passing a string for the hydration type:

<!-- for default hydration (instant) -->
<NuxtDynamic component="FieldText" name="firstname" />

<!-- hydrating when idle -->
<NuxtDynamic component="FieldText" name="firstname" when-idle />

<!-- hydrating when visible -->
<NuxtDynamic component="FieldText" name="firstname" when-visible />

<!-- hydrating never -->
<NuxtDynamic component="FieldText" name="firstname" never />

<!-- hydrating on event -->
<NuxtDynamic component="FieldText" name="firstname" on="mouseover" />

[liamb13]

@aerophobic this looks a lot cleaner in my opinion. Only thought; is there a use case where hydration would need to be computed/changed?

[mbeckershc]

I would be keen to try the pre-version also :)

[aerophobic]

@liamb13 thought about that too. how about having props aswell concrete as dynamic so you can choose which way you want to configure the component:

<!-- for default hydration (instant) -->
<NuxtDynamic component="FieldText" name="firstname" />

<!-- hydrating when idle -->
<NuxtDynamic component="FieldText" name="firstname" when-idle />

<!-- hydrating when visible -->
<NuxtDynamic component="FieldText" name="firstname" when-visible />

<!-- hydrating never -->
<NuxtDynamic component="FieldText" name="firstname" never />

<!-- hydrating on event -->
<NuxtDynamic component="FieldText" name="firstname" on="mouseover" />

<!-- dynamically configure the component -->
<NuxtDynamic component="FieldText" name="firstname" :hydration="{ type: 'on', options: 'mouseover' }" />

WDYT?

[liamb13]

@aerophobic the best of both worlds. I think that's perfect. Super clean for 90% of cases, while giving the ability to deep dive if required.

[liamb13]

I'll test this out toward the end of the week and share my thoughts. Great work @aerophobic!

[aerophobic]

@liamb13 @mbeckershc @shtse8 a preversion is ready to be tested with nuxt v3:

yarn add @blokwise/dynamic@next

the docs are not updated yet, neither are the tests. the component can be used as described in the comment above. for a deeper understanding on how to use props see comments in the sourcecode of the component or its composables.

let me know if you experience any issues 🙏

[mbeckershc]

Hi @aerophobic ,

Thank you for all your hard work!

I seem to have it mostly sorted, however I'm getting the following error.

[Vue warn]: Unhandled error during execution of setup function 
  at <Dynamic key=0 isComponent="BasicTextContent" name="basic-text-content"  ... >
[nitro] [dev] [unhandledRejection] ReferenceError: ref is not defined

My current code is:

<NuxtDynamic
        v-for="(component, i) in page.attributes.Page_Body"
        :key="i"
        :isComponent="toPascalCase(component.__component.split('.')[1])"
        :name="component.__component.split('.')[1]"
        :data="component"
        :path="route.params.slug"
        componentRef="cmpRef"
        ref="component"
        when-visible
      />

This is happening both with and without the refs being added.

  componentRef="cmpRef"
        ref="component"