Can't use in nuxt3 #15
Comments
|
@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. |
aerophobic
added
enhancement
|
How’s this coming along @aerophobic? Do you need any support? |
|
@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 :) |
|
@liamb13 & @shtse8: I found a way to do it. Had to rewrite the hydration part myself instead of using 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" /> |
|
@aerophobic this looks a lot cleaner in my opinion. Only thought; is there a use case where hydration would need to be computed/changed? |
|
I would be keen to try the pre-version also :) |
|
@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? |
|
@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. |
|
I'll test this out toward the end of the week and share my thoughts. Great work @aerophobic! |
|
@liamb13 @mbeckershc @shtse8 a preversion is ready to be tested with nuxt v3: 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 🙏 |
|
Hi @aerophobic , Thank you for all your hard work! I seem to have it mostly sorted, however I'm getting the following error. My current code is: This is happening both with and without the refs being added. |
|
Actually, I wonder if it could be from these warnings. |
|
hey @mbeckershc thanks for testing and for your response. I'll try to reproduce your issue and get back at you with feedback. The warnings shouldn't be a problem, but need to be fixed aswell, thanks for pointing that out 🙏 |
|
@mbeckershc I found and solved the issue regarding the error the memtioned warning about duplicated imports still persist but the issue does not impact the functionality. be aware that the as always: if you experience problems, don't hesitate to report them here 🙏 |
|
@aerophobic Amazing! Thank you very much, will give it a go today! Regarding the |
|
Not exactly sure where I'm going wrong. I'm just trying to get a simple example setup and can't seem to receive any errors nor components. I'm calling:
Using this works as expected: NuxtDynamic doesn't show anything. No errors, no content. |
|
@liamb13 I just released a new version fixing an issue which ended up not loading and displaying the fallback component if a component could not be loaded. with version v2.0.0-4 you should see messages when components could not be loaded with your code. I could not reproduce it so far, but:
if you'd provide a reproduction link I could look into your issue. btw: I see you are loading dynamic components upon storyblok data, am I right? I'll release a new version of |
|
@aerophobic I'll share a reproduction link shortly. I am trying with Storyblok so please keep me posted on that update. I'm strongly considering reverting to a Nuxt 2/Storyblok setup for that project. Just too many little gotchas popping up for the time being. |
|
sorry for the inconvenience - but I can fully understand that deicision. I didn't migrate projects or started new ones with nuxt v3 neither - at least not for production. there are struggles to overcome, still. the latest RC is quite promising, but lack of docs at some points make it hard to implement seamlessly. I'll keep you posted about the |
|
@liamb13 I kinda found the issue causing problems in your code: if you remove the did you set up the |
|
Thank you @aerophobic! No apology needed either. It's possible I haven't. I just followed the Storyblok tutorial and haven't delved much further. |
|
@liamb13 Have you had any luck getting this working? |
|
Would also love to use this. I assumed the current Nuxt 3 auto import of components would work with headless cms vibes but it doesnt. |
|
I've also noticed the Currently using the latest Any idea on how this can be fixed? |
Same error : |
|
@aerophobic Any updates regarding the move to nuxt3? Thanks in advance! |
|
Hey folks. Hadn't the chance to finalize this for nuxt v3 due to missing time and focus. I'll look into this in the coming week and try to come up with a solution. If someone would like to assist in any way, feel free to ping me. I keep you updated in this thread about the state of the project and its compatibility for nuxt v3. |
|
I used vue 3 on a headless cms for a module based front end. This is the main part of the code I used to have dynamically loaded components in the browser, might be helpful to you or others: <template>
<div v-if="components">
<component
v-for="(component, index) in components"
:key="index"
:is="component.component"
v-bind="component.data"
/>
</div>
</template>
<script>
import { defineAsyncComponent } from 'vue';
export default {
data:()=> ({
components: null, // [{data_props, component_name}]
}),
async created() {
// components (i had an array of components to load)
const components = [
{
name: "ModuleAccordion",
data: {theme: 'blue', title: "hello", body: "I am here"}
},
{
name: "ModuleBanner",
data: {title: "hello", body: "I am here", img: "https://placeholder.com/assets/images/150x150-500x500.png"}
}
]
// import components
if (components) {
const dynamic_components = components.map((component)=> {
const {name, data} = component;
// split the data and the component instance so you can v-bind the data easier in the template
return {
data: data,
component: defineAsyncComponent(() => import(`./components/Module/${name}.vue`))
}
})
// download all components over the network before rendering the page
// otherwise the page jumps around as components load in
await Promise.all(dynamic_components.map((component)=> {
return component.component.__asyncLoader()
}))
// we do not want components to be reactive data, this can cause performance issues, so we freeze the object
// vue understands frozen objects should not be reactive.
this.components = Object.freeze(dynamic_components)
}
}
}
</script> |
|
Hi Guys ;) |
|
Hi everyone! Just wanted to know what is the status of this update. I am currently migrating a website from Nuxt 2 to Nuxt 3 and I have this package as a dependency. I have added Is this production ready or do we have to wait for a new release? Thank you! |
|
Hey folks! It has been quite some time since the last update. So here it is: With the stable releases of Nuxt 3 moving forward and the additions of new tools via I got a working PoC, which works flawlessly on my end. I'm going to refactor a couple of things and push a new preversion within the next week for everyone interested in testing and playing around with it. The module will be capable of detecting, auto-importing, registering and rendering components without the limitation of pointing to a specific subdirectory as in the approach @gregg-cbs suggested. Stay tuned 👾 |
|
I just have error, after installation and setting up in nuxt config |
|
@aerophobic I am getting this error when using the @next version: Any idea what is going on here? Here is my code: <script setup>
const dynamic_comp = 'Card';
</script>
<template>
<NuxtDynamic :component="dynamic_comp"></NuxtDynamic>
</template>Edit: I noticed that I am also getting these error & warnings on dev server startup: |
|
I am getting exactly the same error and warnings. @aerophobic: is the new release you mentioned ready? Thanks! |
Can this be related to : nuxt/nuxt#22833 🤷♂️ |
|
@aerophobic Hi, is there any progress on Nuxt3 version?
Update: Sorry, I just discovered new prerelease versions for Nuxt3, but it still doesnt work for me. I tried the latest one v2.0.0-6 and I get this error: Thanks |
The text was updated successfully, but these errors were encountered: