Lazy load typescript component

[fpoliquin]

Hi,

I've been testing your template for a couple of days and so far it's been great except for this issue. Is there a way to lazy load a TypeScript component ?

See router doc

I've been trying using something like this:

AsyncModule.ts:

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class AsyncModule extends Vue {

    render(h) {
        return h('p', 'Hello')
    }
}

Router.ts

const AsyncModule = resolve => (require as any)(['components/AsyncModule'], resolve)

export default new Router({
    routes: [
        ...
        {
            path: '/routes',
            name: 'Routes',
            component: Routing,
            children: [
                {
                    path: 'asyncmodule',
                    name: 'AsyncModule',
                    component: AsyncModule
                }
            ]
        }]})

If I replace:

const AsyncModule = resolve => (require as any)(['components/AsyncModule'], resolve)

By

import AsyncModule from 'components/AsyncModule'

Everything works (except it is not lazy).

In the browser console, I can see this error:

[Vue warn]: Failed to mount component: template or render function not defined.

Thanks

[Toilal]

I don't use lazy component loading for now, so I can't really help sorry.

Maybe you could open an issue in vue-class-component project ?

[fpoliquin]

Finally, I created this bug vue-router-1379

Thanks for your help.