I am currently developing a small application using VueJS, and I have an API that provides information about the components needed for rendering the page.
The setup of vue-router looks like this:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
export const router = new VueRouter({
routes:
[
{
path: '/',
component: Vue.component('welcome', () => import('../Components/Admin/Login.vue')),
name: 'login'
},
{
path: '/:page',
component: Vue.component('dashboard', () => import('../Components/Admin/Dashboard/Dashboard.vue')),
name: 'dashboard'
},
]
});
The dashboard component in turn asynchronously loads the required components as shown below:
<template>
<div>
<header>
// Header content
</header>
<div class="section" id="dashboard">
<div class="columns">
<aside class="column is-2 menu-section">
<nav class="menu is-centered">
// Menu section
</nav>
</aside>
<main class="column" id="main-section">
<page-title :title="title"></page-title>
<div class="columns is-multiline">
<div class="column">
<top-seller-widget></top-seller-widget>
</div>
</main>
</div>
</div>
</div>
</template>
<script>
export default {
name: "dashboard",
data() {
return {
pageComponents: '',
title: '',
description: ''
}
},
components: {
'PageTitle': () => import('./PageTitle'),
'TopSellerWidget': () => import('./TopSellerWidget')
},
created() {
axios.get('/api/page-components?slug='+this.$route.params.page).then(response => {
if(response.status === 200)
{
this.title = response.data.page.title
console.log(response.data)
}
})
}
}
</script>
<style scoped>
// Some styling
</style>
The issue arises when trying to dynamically load components based on the API response. Although individually importing components worked fine, creating a dynamic loop caused errors as shown below:
axios.get('/api/page-components?slug='+this.$route.params.page).then(response => {
if(response.status === 200)
{
this.title = response.data.page.title
if(response.data.page.content)
{
response.data.page.content.components.forEach(function (val, index) {
Vue.component(val.name, () => import(val.location))
})
}
console.log(response.data)
}
})
These errors led to troubleshooting steps which can be seen here:
https://i.sstatic.net/gIcS6.png
Console output also indicated issues:
https://i.sstatic.net/Yc6v6.png
Any advice on how to handle such scenarios efficiently?