Question: How do I code split by route using vue-router@next?

I’d like to lazy load routes / create a chunk for each route but I can’t figure out how to make it work. In Webpack I can use a dynamic import with a “magic comment” to name the chunk.

Something like this would be nice but magic comments are something I don’t really care about, I’d just like the output of my build to be split by route and to have the dynamic imports reference the .js file.

import { RouteRecordRaw } from "vue-router"

export const routes: Array<RouteRecordRaw> = [
  {
    name: "About",
    path: "/about",
    component: () => import(/* webpackChunkName: "about" */, "../views/About.vue")
  }
]

This thread seems to indicate it works now using rollup-plugin-dynamic-import-variables but using a dynamic import in the router doesn’t ouput what I’d expect – is there something else I need to configure?

[onx2]

Sure! I simply changed it to the following:

import { defineAsyncComponent } from "vue"
import { RouteRecordRaw } from "vue-router"

export const routes: Array<RouteRecordRaw> = [
  {
    name: "About",
    path: "/about",
    component: defineAsyncComponent(() => import("../views/About.vue"))
  }
]

[Section about generate routes removed to prevent misinformation]

If someone knows how to make dynamically generated routes work, please comment.

[fjeddy]

Hate that no one answered the original question 😕 How do you set a custom name on the chunk.