Módulos Nuxt: imagens, autenticação e i18n
Instalar e configurar @nuxt/image para imagens otimizadas, @nuxtjs/auth-next para autenticação e @nuxtjs/i18n para internacionalização.
Módulos Nuxt: imagens, autenticação e i18n é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que são módulos do Nuxt
Os módulos são o mecanismo oficial de extensão do Nuxt. Eles são instalados em nuxt.config.ts e se integram à compilação, ao tempo de execução e ao servidor de desenvolvimento. A maioria dos recursos do ecossistema são módulos.
Instalando um módulo
Instale o módulo com npm install e depois adicione-o a modules em nuxt.config.ts.
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxt/image',
'@sidebase/nuxt-auth',
'@nuxtjs/i18n'
]
});@nuxt/image
Substitui <img> por <NuxtImg> otimizado — formatação automática (WebP/AVIF), srcset responsivo, carregamento sob demanda e integração com 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 direção de arte
<NuxtPicture> gera um elemento <picture> com várias tags <source> para direção de arte.
<NuxtPicture src="/hero.jpg" alt="" :imgAttrs="{ width: 1200, height: 600 }" />Configuração do provedor de imagens
Configure um provedor de CDN (Cloudinary, imgix, Vercel etc.) para que todas as imagens sejam encaminhadas por ele.
export default defineNuxtConfig({
modules: ['@nuxt/image'],
image: {
provider: 'cloudinary',
cloudinary: { baseURL: 'https://res.cloudinary.com/yourname/image/fetch/' }
}
});@sidebase/nuxt-auth (Autenticação)
Módulo de autenticação com vários provedores: OAuth compatível com NextAuth, credenciais locais e fluxos personalizados.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@sidebase/nuxt-auth'],
auth: {
baseURL: process.env.AUTH_ORIGIN,
provider: { type: 'authjs' }
}
});Usando autenticação nas páginas
O composable useAuth() disponibiliza a sessão, o status e 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>Protegendo rotas com middleware
Use o middleware de autenticação em uma página para exigir autenticação.
<script setup>
definePageMeta({ middleware: 'auth' });
</script>@nuxtjs/i18n (Internacionalização)
O módulo oficial de i18n oferece suporte a vários idiomas, rotas com prefixo de localidade, arquivos de tradução carregados sob demanda e hreflang otimizado 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/'
}
});Traduzindo em componentes
Use $t nos modelos ou useI18n na configuração.
<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>Rotas com prefixo de localidade
As URLs se tornam /en/about, /tr/about. Use localePath('/about') para gerar links com o prefixo correto.
<NuxtLink :to="localePath('/profile')">{{ $t('profile') }}</NuxtLink>Outros módulos populares
@pinia/nuxt (gerenciamento de estado), @vueuse/nuxt (mais de 200 composables), @nuxtjs/tailwindcss (configuração do Tailwind), @nuxtjs/color-mode (modo escuro), @nuxt/content (CMS baseado em arquivos).
Escrevendo um módulo personalizado
Para funcionalidades internas de um monorrepositório, escreva um módulo que se integre ao ciclo de vida do Nuxt. Os módulos são poderosos: registram componentes, configuração de execução, rotas do servidor e etapas de compilação.
Verificação rápida
Qual módulo do Nuxt 3 oferece carregamento otimizado de imagens com WebP/AVIF automático e srcset responsivo?
Recapitulação: módulos do Nuxt
Os módulos estendem o Nuxt — são instalados por meio da matriz modules em nuxt.config.ts. @nuxt/image é usado para imagens otimizadas (formatação automática, srcset, carregamento sob demanda). @sidebase/nuxt-auth (ou nuxt-auth) é usado para autenticação. @nuxtjs/i18n é usado para traduções e rotas com prefixo de localidade. Outros módulos: @pinia/nuxt, @vueuse/nuxt, @nuxtjs/tailwindcss, @nuxt/content. Escreva módulos personalizados para reutilização interna.
Perguntas Frequentes
A aula “Módulos Nuxt: imagens, autenticação e i18n” é grátis?
Sim — o texto completo de “Módulos Nuxt: imagens, autenticação e i18n” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Módulos Nuxt: imagens, autenticação e i18n”?
Instalar e configurar @nuxt/image para imagens otimizadas, @nuxtjs/auth-next para autenticação e @nuxtjs/i18n para internacionalização. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Módulos Nuxt: imagens, autenticação e i18n”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Roteamento baseado em ficheiros e importações automáticas
- useFetch e useAsyncData
- Módulos Nuxt: imagens, autenticação e i18n
- Implementação: estática vs SSR