How can I lazy load a Vue Component?

Question

I'm trying to lazy load a Login component but after using <Suspense> and <template> with default and callback. It works normally but after the component is loaded the Loading component does not leave.

Here is my router.js code:

import { createWebHistory, createRouter } from 'vue-router'


const Login = () => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(
                import ('./components/pages/auth/Login'),
            )
        }, 1000)
    })
}
const Register = () => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(
                import ('./components/pages/auth/Register'),
            )
        }, 1000)
    })
}

const routes = [{
        path: '/login',
        name: 'login',
        component: Login,
    },
    {
        path: '/register',
        name: 'register',
        component: Register,
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes: routes
})

export default router

App.vue is my root component file which is shown below:

<template>
    <div>
        <Suspense>
            <template #default>
                <RouterView />
            </template>
            <template #fallback>
                <div>
                    <h1>Loading....</h1>
                </div>
            </template>
        </Suspense>
    </div>
</template>
<script>
export default {
    components: {

    }
}
</script>
<style scoped>
div {
    height: 100%;
    width: 100%;
    background-color: black;
}

h1 {
    font-size: 30px;
    font-weight: bold;
    color: white;
}
</style>

Below is the result I get: The black background is the loading which is not suppose to be there after component has loaded. Click to view picture

What "Loading component" are you talking about? I only see div > h1 > 'Loading....' in the fallback slot. — tony19
– tony19, Commented Jun 14, 2022 at 0:04
The black background is part of App.vue, which wouldn't get removed. — tony19
– tony19, Commented Jun 14, 2022 at 0:04
It is the fallback part which is suppose to only show when the main default component is loading. — Joseph Onipede
– Joseph Onipede, Commented Jun 14, 2022 at 21:11
Yes, I understand that. But that's not a component. That's a slot. And that slot seems to be correctly replaced in your picture, as I don't see the text "Loading..." anywhere. You mention that the black background is not supposed to be there, but your styles apply background-color: black to all divs. There's a div at the root of App.vue, so that background would not disappear regardless of your <Suspense>. — tony19
– tony19, Commented Jun 14, 2022 at 22:11

Sombriks · Accepted Answer · 2022-06-13 20:06:00Z

2

According with official docs all you need is to pass a function with dynamic import inside:

// replace
// import UserDetails from './views/UserDetails'
// with
const UserDetails = () => import('./views/UserDetails')

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

answered Jun 13, 2022 at 20:06

Sombriks

3,6804 gold badges43 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joseph Onipede Over a year ago

I've tried this before it gave me the same result. It's not that my code is wrong.. I just added a delay of 1 seconds to the load time so that I can clearly observe the differences.

Collectives™ on Stack Overflow

How can I lazy load a Vue Component?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related