resolveComponent does not work?
Hi guys i have a weird question. I cant load these components in. The component has been loaded in by a for loop which works the same as the one shown in the screen by resolveComponent(name from for loop). Am i missing something?
45 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Ive done it through this a with a window[layout_variant[i]] and both wont work
Did you verify the array holds data?
Yes!
I feel like the lowercase messed things up, but i have no clue why it does that.
If i hardcode <ProductMetaText> it works
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
<script>
import pageText from "~/data/text/production/products.json";
import useScrollController from "~~/composables/useScrollController";
const scrollController = useScrollController();
export default {
key: "_product",
props: {
pageData: {
type: Object,
required: true,
},
pageType: {
type: String,
required: true,
},
isAdmin: {
type: Boolean,
required: true,
},
jmUrl: {
default: "",
},
},
setup(props) {
let components = [];
for(let i = 0; i < props.pageData.layout_variant.length; i++) {
// = resolveComponent(props.pageData.layout_variant[i]);
components.push(resolveComponent(props.pageData.layout_variant[i]));
}
return {
components
}
},
}
</script>
idk how to do codeblock
btw since it's hard to see, resolving components needs the full path of the component
iirc
Thats whats confusing me. Were using the resolveComponents in our basically index.vue which just puts the filename in
This works
this does not
if i put a hardcoded string it does not aswell.
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
chunk-3NMN3MUW.js:1381 [Vue warn]: Failed to resolve component: ProductMetaText
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <ProductView key=0 page-data= {giveAanbiedingenCount: 14, layout_variant: Array(7), productOrder: null, producten: {…}, varianten: Array(11), …} page-type="aanbiedingen" ... >
at <[...slug] class="min-h-screen mx-auto" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouteProvider key="/pampers,baby-dry,maat-3" routeProps= {Component: {…}, route: {…}} pageKey="/pampers,baby-dry,maat-3" ... >
at <FragmentWrapper >
at <RouterView name=undefined route=undefined class="min-h-screen mx-auto" >
at <NuxtPage class="min-h-screen mx-auto" >
at <Default >
at <LayoutLoader key="default" name="default" hasTransition=false >
at <FragmentWrapper >
at <NuxtLayout>
at <App key=2 >
at <NuxtRoot>
Is it because try to resolve it while im already in a component?
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
just to verify that the file indeed exists
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
nothing
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Yea that works
The thing is i need to load in like 6-7 components
ehh
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Are those components registered globally?
wym registerd globally?
You can’t resolve a component via variable unless it is.
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Either in the components/global dir or with the global.vue suffix.
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
No, it doesn’t. Are you confusing it with auto imports?
like wtf is going on here
test works
your loop just puts all the names in a array
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
this works
like
really dude
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Nuxt can’t register a component that is not visible at build time. It’s impossible.
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Nope
like
zxz
No that won’t work because it’s still a variable that gets evaluated at runtime
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Anyways, problem is solved.
Thanks for the help guys