logout e integracion con authentik completa

nuxt4-app/app/error.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+const props = defineProps<{
+  error: NuxtError
+}>()
+
+const handleError = () => clearError({ redirect: '/' })
+
+const errorMessage = computed(() => {
+  if (props.error.statusCode === 404) {
+    return {
+      title: 'Página no encontrada',
+      description: 'Lo sentimos, la página que buscas no existe o ha sido movida.',
+      icon: 'i-lucide-file-question'
+    }
+  }
+  return {
+    title: 'Error del servidor',
+    description: 'Ha ocurrido un error inesperado. Por favor, intenta nuevamente.',
+    icon: 'i-lucide-alert-circle'
+  }
+})
+</script>
+
+<template>
+  <UDashboardLayout>
+    <UDashboardPanel grow>
+      <div class="flex items-center justify-center min-h-screen p-4">
+        <div class="text-center max-w-md mx-auto space-y-6">
+          <!-- Error Icon -->
+          <div class="flex justify-center">
+            <div class="w-20 h-20 rounded-full bg-red-50 dark:bg-red-950/30 flex items-center justify-center">
+              <UIcon :name="errorMessage.icon" class="size-10 text-red-600 dark:text-red-400" />
+            </div>
+          </div>
+
+          <!-- Error Code -->
+          <div>
+            <h1 class="text-6xl font-bold text-gray-900 dark:text-white mb-2">
+              {{ error.statusCode || '500' }}
+            </h1>
+            <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-3">
+              {{ errorMessage.title }}
+            </h2>
+            <p class="text-gray-600 dark:text-gray-400">
+              {{ errorMessage.description }}
+            </p>
+          </div>
+
+          <!-- Error Details (dev mode) -->
+          <div v-if="error.message && $config.public.dev" class="mt-4 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg text-left">
+            <p class="text-xs font-mono text-gray-600 dark:text-gray-400 break-all">
+              {{ error.message }}
+            </p>
+          </div>
+
+          <!-- Actions -->
+          <div class="flex flex-col sm:flex-row gap-3 justify-center mt-8">
+            <UButton
+              to="/"
+              color="primary"
+              size="lg"
+              icon="i-lucide-home"
+            >
+              Ir al inicio
+            </UButton>
+            <UButton
+              color="neutral"
+              variant="outline"
+              size="lg"
+              icon="i-lucide-refresh-ccw"
+              @click="handleError"
+            >
+              Intentar nuevamente
+            </UButton>
+          </div>
+        </div>
+      </div>
+    </UDashboardPanel>
+  </UDashboardLayout>
+</template>