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

lazy loading by scroll vue

putsan answered on December 28, 2020 Popularity 9/10 Helpfulness 2/10

answer lazy loading by scroll vue

related lazy loading in vue js

lazy loading by scroll vue

Comment

npm i vue-infinite-loading

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript lazy-loading scroll

Link to this answer
Share Copy Link

Contributed on Dec 28 2020

putsan

0 Answers Avg Quality 2/10

Closely Related Answers

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 8/10 Helpfulness 3/10 Language javascript

Source: chat.openai.com

Tags: javascript lazy-loading laz

Link to this answer
Share Copy Link

Contributed on Dec 13 2023

Mohammad Usman

0 Answers Avg Quality 2/10

lazy loading by scroll vue

Contents

More Related Answers

lazy loading by scroll vue

Closely Related Answers

lazy loading in vue js

Grepper

Documentation

Social

Legal

Contact

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