useDeferredComponent

Sirve para cargar componentes de forma diferida (lazy + delay). Esto es útil para:

• Cargar modal, diálogo o sección solo cuando sea necesario.

• Mejorar el rendimiento evitando imports iniciales innecesarios.

• Crear una experiencia de usuario progresiva.

Implementación del Composable:

export function useDeferredComponent({
  path,
  delay = 2000, // Tiempo de espera antes de cargar el componente (en milisegundos)
}: {
  path: () => Promise<any> // Función que devuelve una importación dinámica del componente (lazy import)
  delay?: number            // Parámetro opcional para personalizar el retraso
}) {
  // Referencia reactiva que contiene el componente una vez cargado
  const component = shallowRef(null)

  /**
   * Inicia la carga del componente de forma diferida.
   * Utiliza setTimeout para retrasar el import dinámico.
   */
  const loadComponent = () => {
    setTimeout(() => {
      component.value = defineAsyncComponent(path) // Carga asincrónica del componente tras el delay
    }, delay)
  }

  // Devuelve la referencia al componente y la función para iniciar su carga
  return { component, loadComponent }
}

Ejemplo de uso en App.vue:

<script setup lang="ts">
const { cookiesAccepted, checkCookiesAccepted } = useCookies();
//pasa el path al composable y recibes la referencia del componente y su funcion que inicia la carga del componente.
const { component: CookieBanner, loadComponent } = useDeferredComponent({
  path: () => import("@ui/banner/CookieBanner.vue"),
});

onMounted(() => {
  checkCookiesAccepted();
  if (!cookiesAccepted.value) {
    loadComponent();
  }
});
</script>
<template>
  <NuxtLayout>
    <Transition name="fade-pages" mode="default" appear>
      <NuxtPage :key="$route.path" />
    </Transition>
  </NuxtLayout>
  <Transition name="alert">
    <component v-if="!cookiesAccepted" :is="CookieBanner" />
  </Transition>
</template>