Módulos de Nuxt: imágenes, autenticación e i18n
Instale y configure @nuxt/image para imágenes optimizadas, @nuxtjs/auth-next para autenticación y @nuxtjs/i18n para internacionalización.
Módulos de Nuxt: imágenes, autenticación e i18n es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué son los módulos de Nuxt?
Los módulos son el mecanismo oficial de extensión de Nuxt. Se instalan en nuxt.config.ts y se integran con el proceso de compilación, el tiempo de ejecución y el servidor de desarrollo. La mayoría de las funcionalidades del ecosistema son módulos.
Instalar un módulo
Instale el módulo con npm y, después, añádalo a modules en nuxt.config.ts.
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxt/image',
'@sidebase/nuxt-auth',
'@nuxtjs/i18n'
]
});@nuxt/image
Reemplaza <img> por <NuxtImg> optimizado: formato automático (WebP/AVIF), srcset adaptable, carga diferida e integración con CDN.
<template>
<NuxtImg
src="/photos/sunset.jpg"
alt="Sunset"
width="800"
height="600"
format="webp"
loading="lazy"
sizes="sm:100vw md:50vw lg:800px"
/>
</template>NuxtPicture para la dirección artística
<NuxtPicture> genera un elemento <picture> con varias etiquetas <source> para la dirección artística.
<NuxtPicture src="/hero.jpg" alt="" :imgAttrs="{ width: 1200, height: 600 }" />Configuración del proveedor de imágenes
Configure un proveedor de CDN (Cloudinary, imgix, Vercel, etc.) para que todas las imágenes se sirvan a través de él.
export default defineNuxtConfig({
modules: ['@nuxt/image'],
image: {
provider: 'cloudinary',
cloudinary: { baseURL: 'https://res.cloudinary.com/yourname/image/fetch/' }
}
});@sidebase/nuxt-auth (Autenticación)
Módulo de autenticación con varios proveedores: OAuth compatible con NextAuth, credenciales locales y flujos personalizados.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@sidebase/nuxt-auth'],
auth: {
baseURL: process.env.AUTH_ORIGIN,
provider: { type: 'authjs' }
}
});Usar autenticación en las páginas
El composable useAuth() expone la sesión, el estado y signIn/signOut.
<script setup>
const { data: session, status, signIn, signOut } = useAuth();
</script>
<template>
<button v-if="status === 'unauthenticated'" @click="signIn('github')">
Sign in with GitHub
</button>
<div v-else>
Welcome, {{ session.user.name }}
<button @click="signOut">Sign out</button>
</div>
</template>Proteger rutas con middleware
Use el middleware de autenticación en una página para exigir autenticación.
<script setup>
definePageMeta({ middleware: 'auth' });
</script>@nuxtjs/i18n (Internacionalización)
El módulo oficial de i18n admite varios idiomas, rutas con el locale como prefijo, archivos de traducción cargados de forma diferida y hreflang optimizado para SEO.
export default defineNuxtConfig({
modules: ['@nuxtjs/i18n'],
i18n: {
locales: [
{ code: 'en', file: 'en.json' },
{ code: 'tr', file: 'tr.json' }
],
defaultLocale: 'en',
lazy: true,
langDir: 'locales/'
}
});Traducir en componentes
Use $t en las plantillas o useI18n en setup.
<script setup>
const { t, locale } = useI18n();
</script>
<template>
<h1>{{ $t('welcome') }}</h1>
<p>{{ t('greeting', { name: 'Alice' }) }}</p>
<button @click="locale = locale === 'en' ? 'tr' : 'en'">
{{ $t('switch_lang') }}
</button>
</template>Rutas con el locale como prefijo
Las URL se convierten en /en/about, /tr/about. Use localePath('/about') para generar enlaces con el prefijo correcto.
<NuxtLink :to="localePath('/profile')">{{ $t('profile') }}</NuxtLink>Otros módulos populares
@pinia/nuxt (gestión del estado), @vueuse/nuxt (más de 200 composables), @nuxtjs/tailwindcss (configuración de Tailwind), @nuxtjs/color-mode (modo oscuro), @nuxt/content (CMS basado en archivos).
Escribir un módulo personalizado
Para la funcionalidad interna de un monorepo, escriba un módulo que se integre con el ciclo de vida de Nuxt. Los módulos son potentes: permiten registrar componentes, configuración del tiempo de ejecución, rutas del servidor y pasos de compilación.
Comprobación rápida
¿Qué módulo de Nuxt 3 proporciona una carga optimizada de imágenes con WebP/AVIF automático y srcset adaptable?
Resumen: módulos de Nuxt
Los módulos amplían Nuxt y se instalan mediante el array modules de nuxt.config.ts. @nuxt/image para imágenes optimizadas (formato automático, srcset y carga diferida). @sidebase/nuxt-auth (o nuxt-auth) para la autenticación. @nuxtjs/i18n para las traducciones y las rutas con el locale como prefijo. También: @pinia/nuxt, @vueuse/nuxt, @nuxtjs/tailwindcss y @nuxt/content. Escriba módulos personalizados para reutilizarlos internamente.
Preguntas frecuentes
¿La lección «Módulos de Nuxt: imágenes, autenticación e i18n» es gratis?
Sí — el texto completo de «Módulos de Nuxt: imágenes, autenticación e i18n» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Módulos de Nuxt: imágenes, autenticación e i18n»?
Instale y configure @nuxt/image para imágenes optimizadas, @nuxtjs/auth-next para autenticación y @nuxtjs/i18n para internacionalización. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Módulos de Nuxt: imágenes, autenticación e i18n»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Enrutamiento basado en archivos e importaciones automáticas
- useFetch y useAsyncData
- Módulos de Nuxt: imágenes, autenticación e i18n
- Implementación: estática frente a SSR