lazy loading vue js code example

Example 1: Lazy loading and code splitting in Vue.js

<template>
  <div> 
    <lazy-component />
  </div>
</template>

<script>
const lazyComponent = () => import('Component.vue')
export default {
  components: { lazyComponent }
}

// Another syntax
export default {
  components: {
    lazyComponent: () => import('Component.vue')
  }
}
</script>

Example 2: vue js lazy load component

const Foo = () => import('./Foo.vue')

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

Example 3: Lazy Loading Routes vue

routes: [
    {
      path: '/vue_films-app',
      name: 'Movies',
      component: Movies,
    },
    {
      path: '/vue_films-app/details/:id',
      name: 'Details',
      component: () => import('../views/Details.vue'),
    },
  ],