[Vuejs]-Lazy loading routes VUE, Webpack, .NET .CORE

by

0👍

Combining the two, this is how to define an async component that will be automatically code-split by webpack:

const Foo = () => import('./Foo.vue')
Nothing needs to change in the route config, just use Foo as usual:

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})
👤grinat

0👍

I recently posted a question that is similar to what you’re looking for. In fact, you don’t even need vue-router in this instance since you’re also working on an MVC project from what I can see.

Global Vue Component Exposure via Webpack

Basically, you can ‘inject’ the components just like this in the instantiating file of webpack;

In this case, I used main.js as my ‘startup’ js

// Vue Components
Vue.component(/* webpackChunkName: "base-select" */ 'base-select', () => import('./components/base-select.vue'));

// Expose Vue globally
// https://stackoverflow.com/questions/45388795/uncaught-referenceerror-vue-is-not-defined-when-put-vue-setting-in-index-html
window.Vue = Vue;

However, i’m still looking for a solution regarding an asynchronous loading failure. Basically what happened was that the component will successfully load but fail at one part of the loading sequence. lol, i realised that i’m just one step ahead of you, no breakthrough yet just that you’ll be able to load components just like me wants you follow the code above that is

👤Nicholas

Leave a comment