Leveraging async elements alongside loading and error components in Vue Router

Question

Leveraging async elements alongside loading and error components in Vue Router

I am attempting to achieve the following:

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import LoadingComponent from '@/components/Loading.vue';

Vue.use(Router);

const router = new Router({
    routes: [
        {
            path: "/",
            name: "home",
            component: Home
        },
        {
            path: "/about",
            name: "about",
            component: () => ({
                component: import("./views/About.vue"),
                loading: LoadingComponent,
                delay: 1
            })
        }
    ]
});

export default router;

However, the loading component never appears, even when I set the network to Slow 3G. This issue only occurs when I use async components in the router; elsewhere, the loading component displays after the designated delay.

Is this a limitation of Vue Router or am I overlooking something in my implementation?

javascript vue.js webpack vue-router async-components

Answer 1

Answer №1

After delving into github issues related to vue-router, I stumbled upon the solution to my question. It appears that using async components isn't as straightforward as the documentation suggests.

As stated in this online discussion:

Vue Router currently only allows routes to resolve to a single component. To work around this limitation, a helper function can be created to generate an intermediary component, like the one below:

const createLazyRoute = AsyncView => {
    const AsyncComponent = () => ({
        component: AsyncView,
        loading: Spinner
    });

    return Promise.resolve({
        functional: true,
        render(h, {data, children}) {
            // Pass any props or children to the view component.
            return h(AsyncComponent, data, children);
        }
    });
};

This intermediary component can then be used with Vue Router as follows:

const router = new Router({
    routes: [
        {
            path: "/",
            name: "home",
            component: Home
        },
        {
            path: "/about",
            name: "about",
            component: () => createLazyRoute(import("./views/About.vue"))
        }
    ]
});

Hopefully, this method proves to be beneficial for others facing a similar challenge like I did!

Answer 2

After delving into github issues related to vue-router, I stumbled upon the solution to my question. It appears that using async components isn't as straightforward as the documentation suggests.

As stated in this online discussion:

Vue Router currently only allows routes to resolve to a single component. To work around this limitation, a helper function can be created to generate an intermediary component, like the one below:

const createLazyRoute = AsyncView => {
    const AsyncComponent = () => ({
        component: AsyncView,
        loading: Spinner
    });

    return Promise.resolve({
        functional: true,
        render(h, {data, children}) {
            // Pass any props or children to the view component.
            return h(AsyncComponent, data, children);
        }
    });
};

This intermediary component can then be used with Vue Router as follows:

const router = new Router({
    routes: [
        {
            path: "/",
            name: "home",
            component: Home
        },
        {
            path: "/about",
            name: "about",
            component: () => createLazyRoute(import("./views/About.vue"))
        }
    ]
});

Hopefully, this method proves to be beneficial for others facing a similar challenge like I did!

Leveraging async elements alongside loading and error components in Vue Router

Answer №1

Similar questions

The list in Jquery UI Autocomplete is not updating correctly

Creating a bucket in Autodesk Forge Viewer is a straightforward process with the Forge API

Default exports are not supported in TypeScript

Experiencing a 400 error while transitioning from ajax to $http?

Simply touch this element on Android to activate

Filtering Dropdown List in AngularJS with a Text Input Field and a Submit Button for Filtering Option Values

Include the await keyword within the .then block

Basic looping through a single item to showcase its properties and data

Placing the IconButton within an AppBar Component using React-JS

What is the best way to delay the loading of a JavaScript script on my website for 20 or 30 seconds

Is there a way I can turn off the dragging functionality in my situation?

Executing a function automatically when a component loads in react-redux can be achieved by utilizing useEffect hook in functional components

Ways to determine if an element has exceeded its container's boundaries

Creating a dynamic form field using JavaScript

Integrate retrieved JSON data using Ajax into D3 visualizations

Error in AngularJS: Unable to access property 'get' as it is undefined

What are the steps to execute a file on localhost using an HTML page?

Is there a way to make the submit button navigate to the next tab, updating both the URL and the tab's content as well?

Is there a way to retrieve the $state object from ui router in the console?

Identifying overflow of text or elements in JavaScript during execution