Mi nuevo stack favorito Nuxt 4 Nuxt UI MongoDB y Quarkus

mi-app/
 ├─ app/
 │  ├─ assets/
 │  ├─ components/
 │  ├─ pages/
 │  └─ app.vue
 ├─ shared/
 ├─ server/
 └─ nuxt.config.ts

// Ejemplo de data fetching optimizado
const { data: productos } = await useAsyncData(
  'productos',
  () => $fetch('/api/productos'),
  {
    server: true,
    default: () => [],
    transform: (data) => data.map(p => ({...p, precioFormateado: formatCurrency(p.precio)}))
  }
)

<template>
  <UContainer class="py-8">
    <UCard>
      <template #header>
        <h1 class="text-2xl font-bold">Gestión de Usuarios</h1>
      </template>
      
      <UTable :rows="usuarios" :columns="columnas">
        <template #acciones-data="{ row }">
          <UButton
            icon="i-heroicons-pencil"
            size="sm"
            color="primary"
            variant="ghost"
            @click="editar(row)"
          />
        </template>
      </UTable>
      
      <template #footer>
        <div class="flex justify-between items-center">
          <span class="text-sm text-gray-500">
            {{ usuarios.length }} usuarios encontrados
          </span>
          <UPagination
            v-model="pagina"
            :total="total"
            :page-count="10"
          />
        </div>
      </template>
    </UCard>
  </UContainer>
</template>

<script setup lang="ts">
const usuarios = ref([])
const pagina = ref(1)
const total = ref(100)

const columnas = [
  { key: 'nombre', label: 'Nombre' },
  { key: 'email', label: 'Email' },
  { key: 'role', label: 'Rol' },
  { key: 'acciones', label: 'Acciones' }
]

async function cargarUsuarios() {
  const { data } = await useFetch('/api/usuarios', {
    query: { pagina: pagina.value }
  })
  usuarios.value = data.value
}
</script>

// Conexión con Mongoose en Nuxt
import mongoose from 'mongoose'

export default defineNitroPlugin(async (nitroApp) => {
  if (!mongoose.connection.readyState) {
    await mongoose.connect(process.env.MONGODB_URI)
  }
})

// Schema de ejemplo
const usuarioSchema = new mongoose.Schema({
  nombre: String,
  email: { type: String, unique: true },
  role: { type: String, enum: ['admin', 'user', 'editor'] },
  preferencias: {
    tema: String,
    notificaciones: Boolean
  },
  creadoEn: { type: Date, default: Date.now }
})

// Indices para optimización
usuarioSchema.index({ email: 1 })
usuarioSchema.index({ creadoEn: -1 })

// Ejemplo de REST API con Quarkus
@Path("/api/productos")
@Produces(MediaType.APPLICATION_JSON)
@Consumes(MediaType.APPLICATION_JSON)
public class ProductoResource {
    
    @Inject
    ProductoService service;
    
    @GET
    @Operation(summary = "Listar productos", description = "Retorna todos los productos")
    public Response listar(
            @QueryParam("page") @DefaultValue("0") int page,
            @QueryParam("size") @DefaultValue("20") int size) {
        List<Producto> productos = service.listar(page, size);
        return Response.ok(productos).build();
    }
    
    @POST
    @Operation(summary = "Crear producto")
    public Response crear(ProductoDTO dto) {
        Producto producto = service.crear(dto);
        return Response.status(Status.CREATED)
                      .entity(producto)
                      .build();
    }
}

// Entity con Panache
@Entity
public class Producto extends PanacheMongoEntity {
    public String nombre;
    public String descripcion;
    public BigDecimal precio;
    public Integer stock;
    public String categoria;
    public LocalDateTime creadoEn;
    
    // Consultas estáticas
    public static List<Producto> findByCategoria(String categoria) {
        return list("categoria", categoria);
    }
    
    public static List<Producto> findActivos() {
        return list("stock > 0");
    }
    
    public static long countByCategoria(String categoria) {
        return count("categoria", categoria);
    }
}

// Repository
@ApplicationScoped
public class ProductoRepository implements PanacheMongoRepository<Producto> {
    
    public List<Producto> buscarConStock(int pagina, int tamanho) {
        return find("stock > 0")
               .page(pagina, tamanho)
               .list();
    }
    
    public Optional<Producto> buscarPorCodigo(String codigo) {
        return find("codigo", codigo).firstResultOptional();
    }
}

┌─────────────────────────────────────────────────────────┐
│                    Nuxt 4 (Frontend)                    │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────┐  │
│  │ Nuxt UI v4  │  │  Pages/Views│  │   API Client    │  │
│  └─────────────┘  └─────────────┘  └─────────────────┘  │
└─────────────────────────────────────────────────────────┘
                             │
                             ▼ HTTP/REST/gRPC
┌─────────────────────────────────────────────────────────┐
│                   Quarkus (Backend)                     │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────┐  │
│  │  REST API   │  │  Services   │  │ MongoDB Panache │  │
│  └─────────────┘  └─────────────┘  └─────────────────┘  │
└─────────────────────────────────────────────────────────┘
                             │
                             ▼
┌─────────────────────────────────────────────────────────┐
│                      MongoDB                            │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────┐  │
│  │  Productos  │  │   Usuarios  │  │     Órdenes     │  │
│  └─────────────┘  └─────────────┘  └─────────────────┘  │
└─────────────────────────────────────────────────────────┘

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxtjs/mdc',
    '@pinia/nuxt'
  ],
  
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
    }
  },
  
  ui: {
    global: true,
    icons: ['heroicons', 'simple-icons']
  },
  
  devtools: { enabled: true }
})

// composables/useApi.ts
export const useApi = () => {
  const config = useRuntimeConfig()
  
  const client = $fetch.create({
    baseURL: config.public.apiBase,
    headers: {
      'Content-Type': 'application/json'
    },
    timeout: 30000
  })
  
  return {
    get: <T>(url: string, options?: object) =>
      client<T>(url, { method: 'GET', ...options }),
    
    post: <T>(url: string, body: object, options?: object) =>
      client<T>(url, { method: 'POST', body, ...options }),
    
    put: <T>(url: string, body: object, options?: object) =>
      client<T>(url, { method: 'PUT', body, ...options }),
    
    delete: <T>(url: string, options?: object) =>
      client<T>(url, { method: 'DELETE', ...options })
  }
}