Load fallback component if main component does not exits

[opuu]

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?

[opuu]

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>

[jh-leong]

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>