Auto cargar componentes con Vite

Es muy sencillo auto importar componentes en Vue 3. Si se trata de uno o dos componentes, el proceso se puede realizar “a mano”.

import {createApp} from 'vue';
import GlobalComponent from './GlobalComponent.vue';

const app = createApp({})
app.component('GlobalComponent', GlobalComponent);

    

Pero, ¿qué ocurre si queremos autoimportar un directorio entero?. Por ejemplo /components. Es aquí donde Vite y su Glob import vienen en nuestra ayuda. Vamos allá ⚡️

Componentes globales con Vite Glob import

Primero, podemos usar Glob import para seleccionar tos los archivos con extensión .vue.

const components = import.meta.globEager('./components/*.vue');

    

Esto resulta en un objeto con esta estructura:

{
    './components/AppComponent.vue'
:
    Module,
        './components/HelloWorld.vue'
:
    Module
}
}

    

Como puedes ver como propiedad tenemos la ruta al componente y como valor, el propio módulo del componente en sí.

Ahora, podemos convertir components en Array con Object.entries y cargarlos con el método component de la recién creada instancia Vue.

Object.entries(components).forEach(([path, component]) => {
    myApp.component(
        path
            .split('/')
            .pop()
            .replace(/\.\w+$/, ''),
        component.default
    );
});

    

Fíjate que por el camino tenemos que hacer varias operaciones:

• Romper el path en diferentes segmentos, separados por / con el método split de Array.
• Quedarnos con el último segmento utilizando el método pop de Array.
• Eliminar la extensión del segmento empleando el método replace de las strings y una expresión regular.

Con todo ello ya tenemos la posibilidad de auto cargar componentes globales en Vue 3 con Vite.

Así queda todo:

import {createApp} from 'vue';
import './style.css';
import App from './App.vue';

const components = import.meta.globEager('./components/*.vue');

const myApp = createApp(App);

Object.entries(components).forEach(([path, component]) => {
    myApp.component(
        path
            .split('/')
            .pop()
            .replace(/\.\w+$/, ''),
        component.default
    );
});

myApp.mount('#app');

    

Demo