El archivo de configuración de Nuxt 3 define las opciones del proyecto mediante la función defineNuxtConfig. Este sistema permite personalizar el comportamiento del framework, desde módulos hasta herramientas de desarrollo.

export default defineNuxtConfig({
 modules: [
   '@element-plus/nuxt'
 ],
 devtools: { enabled: true },
 elementPlus: {
   icon: 'ElIcon'
 },
 css: [
   'element-plus/dist/index.css'
 ],
 plugins: [
   '~/plugins/element-plus.client.ts'
 ],
 vite: {
   css: {
     preprocessorOptions: {
       scss: {
         additionalData: '@use "@/assets/styles/default.scss" as *;'
       }
     }
   },
   server: {
     proxy: {
       '/api': {
         target: 'http://localhost:8989',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, '')
       }
     }
   }
 }
})

Componentes clave:

• Módulos: Incluye integraciones como Element Plus para componentes UI.
• Herramientas de desarrollo: Habilita el inspector de Nuxt para depuración.
• Estilos globales: Importa estilos CSS del componente UI.
• Plugins personalizados: Carga archivos de inicialización específicos, como configuraciones de componentes.
• Proxy de Vite: Resuelve problemas de CORS durante el desarrollo al redirigir peticiones a un servidor backend.

Integración de Element Plus

Este plugin registra Element Plus en toda la aplicación Vue. Se encarga de instalar el conjunto completo de componentes y sus estilos.

import ElementPlus from 'element-plus'
import 'element-plus/theme-chalk/index.css'

export default defineNuxtPlugin((nuxtApp) => {
 nuxtApp.vueApp.use(ElementPlus)
})

Al usar defineNuxtPlugin, se garantiza que el plugin se ejecute en el momento adecuado del ciclo de vida de la aplicación. El uso de vueApp.use() activa el plugin globalmente.

Estructura de la interfaz principal

El componente App.vue actúa como contenedor base para todas las rutas. Define el flujo de renderizado entre layout y página.

<template>
 <div>
   <NuxtLayout>
     <NuxtPage />
   <NuxtLayout>
 </div>
</template>

Este patrón permite definir estructuras reutilizables como encabezados, menús laterales o pies de página. NuxtLayout carga el diseño apropiado según la ruta actual, mientras que NuxtPage renderiza el contenido específico del componente asociado a esa ruta.

Organización por layouts

Los diseños se gestionan dentro de la carpeta layouts/. Por defecto, si no se especifica otro, se usa default.vue.

<template>
 <div class="app-layout">
   <header>...</header>
   <main>
     <NuxtPage />
   </main>
   <footer>...</footer>
 </div>
</template>

<script setup>
// Lógica compartida para todos los layouts
</script>

<style scoped>
.app-layout {
 display: flex;
 flex-direction: column;
 height: 100vh;
}
main { flex-grow: 1; }
</style>

Puedes crear diseños personalizados como custom.vue y asignarlos a una página específica usando:

export default {
 layout: 'custom'
}

Sistema de rutas automático

Nuxt 3 genera automáticamente las rutas basándose en la estructura de carpetas bajo pages/:

• pages/index.vue → /
• pages/about.vue → /about
• pages/blog/[slug].vue → /blog/:slug (ruta dinámica)
• pages/admin/settings.vue → /admin/settings (ruta anidada)

Las rutas dinámicas usan corchetes para capturar parámetros, accesibles mediante $route.params. Para rutas anidadas, puedes usar <NuxtChild /> en el componente padre para renderizar el hijo correspondiente.

Gestión de peticiones HTTP

Se recomienda usar fetch nativo o axios para comunicarse con APIs externas.

Con fetch

const data = ref(null)
const error = ref(null)

async function loadApiData() {
 try {
   const res = await fetch('https://api.example.com/data')
   if (!res.ok) throw new Error('Error de red')
   data.value = await res.json()
 } catch (err) {
   error.value = err
 }
}

loadApiData()

Con axios

Instala primero:

npm install axios

Luego usa:

import axios from 'axios'

const response = await axios.get('/api/posts')

Manejo de CORS con proxy

La configuración de proxy en vite.server.proxy evita errores de CORS en desarrollo al enrutar solicitudes a un backend local sin necesidad de modificar el servidor real.