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');

Puedes probar el código en vivo aquí 🔥.