useShowAlert — Sistema de Alertas

El sistema de alertas permite mostrar notificaciones tipo toast (éxito/error) desde cualquier parte de la aplicación. Es global — no importa dónde lo llames, la alerta aparece siempre en la misma posición.

---

Cómo funciona por dentro

• Usa useState de Nuxt (estado compartido entre componentes, sin Pinia)
• El componente <AETheAlert> se renderiza en app.vue fuera de layouts (siempre visible)
• Puede mostrar hasta 2 alertas simultáneas (una success + una error)
• Se auto-cierra tras la duración configurada

---

Tipos de alerta

type AlertType = 'error' | 'success'

Solo existen estos dos. No hay warning, info, ni variantes adicionales.

---

Cómo disparar una alerta

const { showAlert } = useShowAlert()

// Éxito (se cierra sola en 5 segundos)
showAlert('success', 'Perfil actualizado correctamente')

// Error (se cierra sola en 5 segundos)
showAlert('error', 'No se pudo guardar los cambios')

// Con duración custom (en milisegundos)
showAlert('error', 'Sesión expirada', 8000)

---

Cómo cerrar una alerta manualmente

const { resetAlert } = useShowAlert()

resetAlert('error')   // Cierra solo la alerta de error
resetAlert('success') // Cierra solo la de éxito
resetAlert()          // Cierra todas

Muchas páginas llaman resetAlert() en onMounted para limpiar alertas stale de la navegación anterior.

---

Dónde se renderiza

En app.vue, fuera de <NuxtLayout> (siempre visible independientemente del layout):

<AETheAlert
  v-for="alert in ALERT"
  :key="alert.typeAlert"
  :type-alert="alert.typeAlert"
  :show-alert="alert.showAlert"
  :duration="alert.duration"
  :message="alert.message"
  @close="resetAlert(alert.typeAlert)"
/>

---

Comportamiento detallado

Aspecto	Valor
Duración por defecto	5000ms (5 segundos)
Máximo simultáneas	2 (una de cada tipo)
Auto-cierre	Sí, tras la duración
Cierre manual por usuario	Sí, botón X en el componente
Si se llama dos veces con el mismo tipo	Reemplaza el mensaje anterior y reinicia el timer
Posición	Fija en pantalla (definida por AETheAlert CSS)

---

Ejemplo real en contexto

async function updateProfile() {
  try {
    await useServices('updateUserProfile', { ...formData }, { promise: true })
    showAlert('success', t('account.profile_updated'))
  } catch {
    showAlert('error', t('account.profile_update_error'))
  }
}

// En middleware de auth — alerta de sesión expirada
showAlert('error', t('auth.session_expired'))
navigateTo('/iniciar-sesion')