Load fallback component if main component does not exits #13058
Unanswered
opuu
asked this question in
Help/Questions
-
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 website:
[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?
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 2 comments
-
Found a way to get rid of the error, but still interested if there is any better way.
<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>
Beta Was this translation helpful? Give feedback.
All reactions
0 replies
-
You can simplify this by using the errorComponent option in defineAsyncComponent:
<template> <MainFooter></MainFooter> </template> <script lang="ts" setup> import { defineAsyncComponent } from 'vue'; const modules = import.meta.glob('@wtp/MainFooter.vue'); const MainFooter = defineAsyncComponent({ loader: (): any => modules['@wtp/MainFooter.vue']?.() || Promise.reject(), errorComponent: () => 'error', }); </script>
Beta Was this translation helpful? Give feedback.
All reactions
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment