This is just some quick test code to illustrate my point
let components = {};
`fetch({ store, route, error }) {
return Promise.all([
store.dispatch('page/fetchPage', route.path),
store.dispatch('products/fetchInitialProducts'),
]).catch(() => error({ statusCode: 404, message: 'Page not found' }))
.then(() => {
System.import('~components/ProductSlider').then((comp) => {
components['product-slider'] = comp;
});
});
},
beforeCreate() {
console.log(components);
this.$options.components = components;
},`
I have a map, where i like to store my asynch loaded modules.
In my template i have this
<component v-for="(item, index) in getPage(path).modules" :is="item.name" :index="index" key="index"></component>
But the problem is i right now have a static import of all posible modules that can end up in my dynamic component. This will end up as a huge bundle. I want to dynamically import the component modules defined for a page that we get from our cms system. Can this be done somehow?
i get this error: Error: render function or template not defined in component: product-slider at normalizeRender (/home/arun/vscodeProjects/flowr/node_modules/vue-server-renderer/build.js:6631:13) at renderComponent (/home/arun/vscodeProjects/flowr/node_modules/vue-server-renderer/build.js:6697:3) at RenderContext.renderNode (/home/arun/vscodeProjects/flowr/node_modules/vue-server-renderer/build.js:6681:7) at RenderContext.next (/home/arun/vscodeProjects/flowr/node_modules/vue-server-renderer/build.js:169:14) at cachedWrite (/home/arun/vscodeProjects/flowr/node_modules/vue-server-renderer/build.js:30:9)
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c717">#c717</a>)</em></sub></div>