Static GitHub Issues

[835] Dynamically define components in a single file component

prev: Where to put code that runs once on app startup (no main.js)
next: Timeout and killed process when running `nuxt build` on node 8 / npm 5

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>