I've been struggling to get the components to work properly. My goal is to store component names in an array, import them asynchronously, and then somehow assign them to app.component. I've spent about six hours on this and just can't seem to crack it. I don't want to have repetitive imports and app.component statements for each component - there must be a more efficient way. It's frustrating that it's not working for me, I'm sure I'm overlooking something simple. Unfortunately, my JavaScript skills are not at an advanced level.
main.js
import { createApp, defineAsyncComponent } from "vue";
import App from "./App.vue";
import router from "./router";
var subComponents = new Array([
"test",
"test2"
]);
subComponents.forEach(subComponent => {
subComponent = defineAsyncComponent(() =>
import(`@/components/sub/${subComponent}.vue`)
)
});
const app = createApp(App);
app.use(router);
app.component(subComponent, subComponents); // Issue may lie here
app.mount("#app");
The errors being reported are:
Failed to resolve component: test
Failed to resolve component: test2