Home

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)