The MainFooter might not exist in the themes folder, in that case we are loading fallback component.

Here is what I came up with:

<template>
    <component :is="footerComponent" />
</template>

<script lang="ts" setup>
    const footerComponent = computed(() => {
        try {
            return import("@wtp/MainFooter.vue");
        } catch (error) {
            console.error(error);
            return defineAsyncComponent(() => import("./FallbackFooter.vue"));
        }
    });
</script>

This works but gives the following error on frontend:

[plugin:vite:import-analysis] Failed to resolve import "@wtp/MainFooter.vue" from "components/MainFooter.vue". Does the file exist?

Any better ways to do this?

The MainFooter might not exist in the themes folder, in that case we are loading fallback component.

Here is what I came up with:

<template>
    <component :is="footerComponent" />
</template>

<script lang="ts" setup>
    const footerComponent = computed(() => {
        try {
            return import("@wtp/MainFooter.vue");
        } catch (error) {
            console.error(error);
            return defineAsyncComponent(() => import("./FallbackFooter.vue"));
        }
    });
</script>

This works but gives the following error on frontend:

[plugin:vite:import-analysis] Failed to resolve import "@wtp/MainFooter.vue" from "components/MainFooter.vue". Does the file exist?

Any better ways to do this?

• vue.js
• nuxt.js
• vite

• You can't do this on component level because the error comes from the bundler. You'd need custom vite plugin to conditionally map MainFooter imports to FallbackFooter. This could be XY problem. Generally you're supposed to be able to verify the existence of a module in your own project – Estus Flask Commented Mar 17 at 22:21
• Managed to do it using import.meta.glob, this might not be the best solution but it is working. – Obaydur Rahman Commented Mar 18 at 20:22
• Neat approach. Likely the best you can do with touching the project config – Estus Flask Commented Mar 18 at 20:58

1 Answer 1

Managed to solve the issue, by using import.meta.glob to check if the component exists.

<template>
    <component :is="footerComponent" />
</template>

<script lang="ts" setup>
    const modules = import.meta.glob("@wtp/MainFooter.vue");
    const footerComponent = shallowRef();

    if (modules["@wtp/MainFooter.vue"]) {
        // @ts-ignore
        footerComponent.value = defineAsyncComponent(() => modules["@wtp/MainFooter.vue"]());
    } else {
        footerComponent.value = defineAsyncComponent(() => import("./FallbackFooter.vue"));
    }
</script>