search

vuejs / rollup-plugin-vue

Roll .vue files
https://vuejs.github.io/rollup-plugin-vue
MIT License
843 stars 148 forks source link

Dynamic import vue components #328

Open ruipvs opened 4 years ago

ruipvs commented 4 years ago

Version

5.0.0

Reproduction link

https://codesandbox.io/s/dawn-sea-zsjtn?fontsize=14&hidenavigation=1&theme=dark

Steps to reproduce

Is there a wait to pass on options of Vue.use() the name of components and dynamically import them? I'm trying it but the normalizeComponent is just applied to imported components as:

import TextImage from '../src/components/modules/TextImage.vue'; 

let component = Object.values(await import('../src/components/modules/TextImage.vue'))[0];
    if (options.modules) {
      options.modules.map(async moduleName => {
        Vue.component(moduleName, component);
    });
}

What is expected?

Dynamic import of components Is there a wait to pass on options of Vue.use() the name of components and dynamically import them?

What is actually happening?

getting an error on dependent side that says: Uncaught SyntaxError: Unexpected token < on template

I'm trying it but the normalizeComponent is just applied to imported components as:

import TextImage from '../src/components/modules/TextImage.vue';

akauppi commented 4 years ago

I likely share the same problem.

Some sample code I found has this:

    component: () => import('../views/SignIn.vue')

Up til now, I didn't know why that didn't work in my project - using rollup-plugin-vue (5.1.6). This may be the reason.