Dynamicaly import component

Dear all,

I have to access the client side routes of my app on the server.
For this, I have created a json file containing the routes of my client side.

Some routes in the json file:

{
    "routes": [
        {
            "path": "/login",
            "name": "login",
            "component": "./pages/Login",
            "meta": {
                "auth": false
            }
        },
        {
            "path": "/",
            "name": "home",
            "component": "./pages/Home",
            "meta": {
                "auth": true,
                "breadcrumb": "home"
            },
            "children": [
                {
                    "path": "/users",
                    "components": {
                        "layout": "./pages/settings/users/Index"
                    }
                    ...

Then, in my router file, I try to import the components dynamically like this:

import VueRouter from 'vue-router'
import store from "./store"

import r from './routes';

mapRoutes(r.routes);

function mapRoutes(routes){
    routes.forEach(function (route) {
        if(route.component){
            route.component=() => import(route.component+'.vue');
        }
        if(route.components){
            for (const layoutName in route.components) {
                route.components[layoutName]= () => import(route.components[layoutName]+'.vue');
            }
        }
        if(route.children){
            mapRoutes(route.children);
        }
    });
}

const routes=r.routes;

const router = new VueRouter({
    history: true,
    mode: 'history',
    routes,

});

I have set the Babel plugin: “@babel/plugin-syntax-dynamic-import” in my mix.js config.

But I faced an error in my browser:

What’s wrong with the dynamic import of my components?

The solution may be to find another way to access my client side routes on the server and return to the standard component’s import, like import Login from './pages/Login'

Thanks for your help.

Adri.

2 Likes

Hi. Can you show structure of your project?

Hi

You have the name of the component in the compent attribute but then you overwrite the name with the imported component. You assign it to an anonymous function () => import(…) and then tries to use the name again for the path to the component. Maybe it would be better to store the name/path of the component in another attribute like componentPath or something like that.

2 Likes

Dear all,
Thank you for your answers.
Indeed, by declaring a variable in which I place the name of the component, the dynamic import works correctly.
However, CSS is not interpreted correctly.

function mapRoutes(routes){
    routes.forEach(function (route) {
        if(route.component){
            let componentName=route.component;
            route.component=()=>import(componentName+'.vue');
        }
        if(route.components){
            for (const layoutName in route.components) {
                let componentName=route.components[layoutName];
                route.components[layoutName]=()=>import(componentName+'.vue');
            }
        }
        if(route.children){
            mapRoutes(route.children);
        }
    });
}

Any idea for including css with dynamic components ?

I also found another solution, I require the.default component, and it works.

route.component=require(componentName+'.vue').default;

Adri.