Router lazy loading with 0.14 does not work for me

JDrechsler

Hello guys,

first of all I want to say that quasar framework rocks!
I used the old version with my own webpack config and without the play app integration and lazy loading worked fine.

Now I do want to use version 0.14 and the webpack config so I can use the play app but I cannot get the lazy loading to work anymore.

{ path: ‘/forum’, component: Forum} // is working
{ path: ‘/forum’, component: () => import(’./components/Forum.vue’) } //is not working

I get the error message: Failed to mount component: template or render function not defined.

I am almost sure that it is my webpack configuration since I used the same code for the vue-router in the older version.
The link to the github solution is: (https://github.com/JDrechsler/Problem-with-vue-router)

If anybody could help me or point me in a direction I would be very grateful.

Thank you in advance

Johannes

a47ae

Have you tried using the @ alias instead of giving a path to the component directory?
Look at the template again

Also try to use the load function, instead of calling import each time directly.

function load (component) {
  // '@' is aliased to src/components
  return () => System.import(`@/${component}.vue`)
}

JDrechsler

It is working with { path: ‘/forum’, component: () => import(’./components/Forum.vue’).then(m => m.default) }

Thank you for this advise. I am using the load function in a similar way:

compNamesFromWebpack.forEach(element => {
var compName = element.replace(’.vue’, ‘’)
var compDomainName = /${compName.toLocaleLowerCase()}
console.log(Created route ${compDomainName})
routes.push({ path: compDomainName, component: load(compName) })
});

This way webpack delivers the component names under src/components and the router creates routes automatically. Everyt time you create a new component the route will be created as well.

a47ae

Ah, interesting approach to auto-register routes. But how do you deal with components that do not represent a view but rather are used to compose new components? Do you put all components that represent a view into a special folder?

JDrechsler

Yes that is what I do. I know right? I have not seen anybody doing this before but I thought I would try it and it actually works. It saves time

a47ae

In my opinion, the problem with this approach is that you can not have nested routes and no router parameters, so it is limited to a specific use case. But still interesting and maybe it could be expanded to support the things mentioned above. Maybe even have some attributes on the component that define how the route should look like.

JDrechsler

I am sure this is possible. With webpack I get the component list by listing all files recursively in one folder. If I say that every subfolder will mark a nested route then that could be one way.

The way it works right now is limited. You are right.

jesus

I am sorry if it has non sense but have you tried async component support for webpack 3 and vue js 2.4.0 ?
I know that 0.14 has issues with 2.4.0 and webpack 3 is a different animal
I think also it could be better to have lazy loading out of router app flow (to avoid constraint app routes and delay responses).
This is a very interesting challenge before to consider to move to SSR: to serve or consume code by context, needs and demand.

JDrechsler

I cannot use any higher version of Vue than 2.2.1 because I am using a version by Daniel Rosenwasser which supports TypeScript in a much nicer and easier way (https://github.com/DanielRosenwasser/typescript-vue-tutorial). Hopefully this will be supported with the new Vue 2.5.

jesus

@JDrechsler Ok I see but … what about webpack 3 ? At least you should do something like this https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/

JDrechsler

Thank you for this great link. I am a little confused though. I thought I was using lazy loading already in my vue-router?

function load(compName: string) {
return () => import(./components/${compName}.vue).then(m => m.default)
}

I will look into webpack 3.

JDrechsler

Yeah I just tried it out. Like in the video (https://egghead.io/lessons/load-components-when-needed-with-vue-async-components) the network tab shows that it loads the component only if you click on the route.

jesus

@JDrechsler this is a complementary info https://webpack.js.org/guides/lazy-loading/
I am glad that you solve it, I think it is much better to move this to low level layer, as far as I see is webstack.

jesus

I was looking at https://www.youtube.com/watch?v=rn97hCNQsKI practical part starts at minute 6:30
Sean Larkin (a maintainer of webpack) recommends to use code splitting ALWAYS on routing.

rohityadav

Guys also you can also like this Code splitting patterns

BY ANTHONY GORE

No More Posting New Topics!

Router lazy loading with 0.14 does not work for me