I'm currently working on a NuxtJS application where I need to dynamically load components. While my code successfully loads the component on the server-side, the browser seems to encounter a significant memory leak during page loading, making it impossible to perform a performance analysis or memory heap snapshot.
My current code setup looks like this:
/plugins/theme-load-method.js
import Vue from 'vue';
export default function ({store}) {
Vue.prototype.loadThemeTemplate = function loadThemeTemplate(template) {
return () => import(`~/components/themes/${store.state.config.theme}/${template}`);
};
}
pages/index.vue
<template>
<component :is="loadThemeTemplate('index.vue')" />
</template>
<script>
export default {
name: "HomePage"
};
</script>
components/themes/MY_THEME_1/index.vue
<template>
<section>
MY_THEME_1 Home Page
</section>
</template>
<script>
export default {
name: "ThemeHomePage",
}
</script>
Any insights on why this memory issue is happening only on the client-side would be greatly appreciated!