Necesito verificar la existencia de un componente antes de mostrarlo dinámicamente en Nuxt. El nombre del componente se basa en un slug de ruta, por lo que no puedo saber de antemano si el nombre del componente es válido.
Si no hay ningún componente para el slug, me gustaría mostrar un texto usando v-else. (ver marcado)
Sin embargo, no puedo inferir si el componente está disponible o no, ya que el valor devuelto siempre es una función.
<component :is="componentDynamic" v-if="componentDynamic" /> <h1 v-else>Component Not available</h1> import Vue from 'vue' export default Vue.extend({ computed: { componentDynamic() { const componentName = this.$route.params.slug, const result = async () => await import(`@/components/${componentName}`) console.log(result) return result }, }, })Descubrí si el componente existe al intentar importarlo a través de import . Si la importación falla, el componente no está disponible y se muestra un mensaje alternativo.
<template> <div> <component :is="componentName" v-if="componentIsAvailable" /> <!-- Show if component doesn't exist --> <div v-else> <h1 class="text-5xl my-20">Component Not available</h1> </div> </div> </template> data() { return { componentIsAvailable: false, componentName: this.$route.params.componentName // nuxt components are in PascalCase, so your parameter / slug should be as well } }, async fetch() { const name = this.componentName this.componentIsAvailable = await import(`@/components/${name}`) .then((_res) => { // console.log('result', _res) return true }) .catch((_error) => { // console.log('error', _error) return false }) },