0

Edit: Vue CLI 5 does not add the preload/prefetch plugin to the webpack config anymore. I tried adding the @vue/preload-webpack-plugin plugin myself and adding in the same config that the Vue CLI 4 used to add, but that still didn't work. Would love to know how to add prefetch to a Vue CLI 5 project.


In my Vue router, I have a lazily loaded route defined with:

const ShoppingCart = () => import('../cart/ShoppingCart.vue')
...
routes: [
 {
   path: '/cart',
   name: 'Cart',
   component: ShoppingCart,
 },
 ...
]

This route is successfully lazy loading, but I would now like to prefetch it.

I have tried adding this in my vue.config.js to add the webpack prefetch plugin:

configureWebpack: {
  plugins: [
    new webpack.PrefetchPlugin('/src/cart/ShoppingCart.vue'),
  ],
},

And I have tried adding this to my dynamic import:

const ShoppingCart = () => import(/* webpackPrefetch: true */'../cart/ShoppingCart.vue')

But even with both of those in place, my route is not pre-fetched.

Jim Cooper
  • 5,113
  • 5
  • 30
  • 35

0 Answers0