Componentes dinámicos en Vue.js

Hay veces que en una aplicación de Vue tenemos una pantalla donde puede haber un número variable de componentes que el usuario puede configurar, por ejemplo en un dashboard o en una pantalla de definición de filtros.

En estos casos usar la sintaxis habitual para importar componentes se hace tedioso y es más sencillo utilizar el componente de Vue component y un sistema de carga dinámica. En esta página lo explican perfectamente.

TL,DR: en la parte de template definimos el componente:

component(:is="currentComponent")

Y definimos la propiedad computada así:

currentComponent()
{
    let name = "Aquí establecemos el nombre del componente a cargar";
    return () => import(`@/components/Ruta1/Ruta2/${name}`);     
}

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.