CODEWITHSUNDEEP
laravelvue.jsvuejs3vue-composition-apivue-options-api
ii iml0sto1
ii iml0sto1

Reputation: 1742

Vue3 Composition API multiple imports with string

Im currently trying to import several components from 1 file. This worked well in Options API but does not seem to work in Composition API

Option API (works)

<script lang="ts">
import * as testComponents from "../Components/TextExports.vue";
export default {
    components: {
        ...testComponents,
    },
};
</script>

Composition API (does not work)

<script setup lang="ts">
    import * as testComponents from "../Components/TextExports.vue";
</script>

File which exports

<script>
export const TestComponents = {
    name: "TestComponents",
};

export { default as TestComponent} from "../Components/TestComponent.vue";
export { default as TestComponentTwo} from "../Components/TestComponentTwo.vue";

export default TestComponents;
</script>

Using the component

<template>
    <template v-for="testComponent in testComponents" :key="testComponent">
        <component
            :is="'TestComponent'"
        />
    </template>
</template>

The dataset testComponents comes from the backend and each data testComponent holds a key named component, there are about 1000 iterations on each loop, the value for each record is a string which in this case is hardcoded as 'TestComponent' for simplicity. However, this still will determine which component to use in the loop.

I can of course use the Options API in combination with the Composition API, but that would still require me to have two script tags. It would be cleaner to use just the Composition API

I've been messing around with Map and dynamic imports, which I haven't gotten to fully work as I wanted to, and I'm not sure if this is the best way to go and I think I'm overthinking it all

const tableComponents = reactive(new Map());
async function fetchComponent(component){
    if(tableComponents.has(component)){
        return tableComponents.get(component);
    }

    let path = `../components/${component}.vue`;
    defineAsyncComponent(() => import(path))
    return import(path).then(val => {
        tableComponents.set(component, val.default)
        return tableComponents.get(component);
    });
}

Does anyone have experience solving this who can guide me in the right direction?

The stack is Laravel 9, Jetstream with Inertia and Vue3

Upvotes: 0

Views: 353

Answers (0)

Related Questions