Breaking News: Grepper is joining You.com. Read the official announcement!

lazy loading in vue js

Add Answer

Mohammad Usman answered on December 28, 2020 Popularity 7/10 Helpfulness 3/10

answer lazy loading in vue js

related Lazy Loading Routes vue

related vue js lazy load component

related lazy loading by scroll vue

lazy loading in vue js

Comment

import { createRouter, createWebHistory } from 'vue-router';
import { defineAsyncComponent } from 'vue';
import LoadingComponent from '@/pages/Loadingpage.vue';

const LoadingAsyncComponent = (component) => defineAsyncComponent({
  loader: () => component,
  loadingComponent: LoadingComponent,
});

const HomeView = LoadingAsyncComponent(import('@/pages/HomePage.vue'));
const WeddingPhotoBooth = LoadingAsyncComponent(import('@/pages/WeddingPhotoBooth.vue'));
const VideoBooth = LoadingAsyncComponent(import('@/pages/VideoBooth.vue'));
const BlogsPages = LoadingAsyncComponent(import('@/pages/BlogsPages.vue'));
const BlogPost = LoadingAsyncComponent(import('@/pages/BlogPost.vue'));
const ContactForm = LoadingAsyncComponent(import('@/pages/ContactForm.vue'));
const BookBooth = LoadingAsyncComponent(import('@/pages/BookBoothWithUs.vue'));
const Gallery = LoadingAsyncComponent(import('@/pages/Gallery.vue'));
const Detail = LoadingAsyncComponent(import('@/pages/Detail.vue'));
const PartiesPhotoBooth = LoadingAsyncComponent(import('@/pages/PartiesPhotoBooth.vue'));
const CorporatePhotoBooth = LoadingAsyncComponent(import('@/pages/CorporatePhotoBooth.vue'));
const BrandActivationPhotoBooth = LoadingAsyncComponent(import('@/pages/BrandActivationPhotoBooth.vue'));

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: '/', name: 'Home', component: HomeView },
    { path: '/booth/photo-booth', name: 'Photo-booth', component: WeddingPhotoBooth },
    { path: '/booth/video-booth', name: 'videoBooth', component: VideoBooth },
    { path: '/blogs', name: 'blogs', component: BlogsPages },
    { path: '/blogs-post/:id', name: 'blogsPost', component: BlogPost, meta: { breadcrumb: "Blog Post" }, props: true },
    { path: '/contact', name: 'contact', component: ContactForm },
    { path: '/book-booth', name: 'BookBooth', component: BookBooth },
    { path: '/gallery', name: 'Gallery', component: Gallery },
    { path: '/detail', name: 'Detail', component: Detail },
    { path: '/parties', name: 'Parties', component: PartiesPhotoBooth },
    { path: '/corporate', name: 'Corporate', component: CorporatePhotoBooth },
    { path: '/brand-activations', name: 'BrandActivation', component: BrandActivationPhotoBooth },
    { path: '/:pathMatch(.*)*', component: HomeView },
  ],
});

export default router;

Popularity 7/10 Helpfulness 3/10 Language javascript

Source: chat.openai.com

Tags: javascript lazy-loading

Link to this answer
Share Copy Link

Contributed on Dec 13 2023

Mohammad Usman

0 Answers Avg Quality 2/10

Closely Related Answers

Lazy Loading Routes vue

Comment

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

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 04 2021

putsan

0 Answers Avg Quality 2/10

vue js lazy load component

Comment

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

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

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: router.vuejs.org

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on May 25 2021

Panicky Piranha

0 Answers Avg Quality 2/10

lazy loading by scroll vue

Comment

npm i vue-infinite-loading

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Dec 28 2020

putsan

0 Answers Avg Quality 2/10

lazy loading in vue js

Contents

More Related Answers

lazy loading in vue js

Closely Related Answers

Lazy Loading Routes vue

vue js lazy load component

lazy loading by scroll vue

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.