vue.js - Load fallback component if main component does not exits - Stack Overflow

admin管理员组

文章数量:1384310

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

Share Improve this question Follow edited Mar 17 at 22:27 desertnaut 60.5k3232 gold badges155155 silver badges181181 bronze badges asked Mar 17 at 22:01 Obaydur RahmanObaydur Rahman 86211 gold badge77 silver badges2020 bronze badges 3

• 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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>

本文标签： vuejsLoad fallback component if main component does not exitsStack Overflow