Modules Nuxt : images, authentification et i18n
Installez et configurez @nuxt/image pour optimiser les images, @nuxtjs/auth-next pour l’authentification et @nuxtjs/i18n pour l’internationalisation.
Modules Nuxt : images, authentification et i18n est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Que sont les modules Nuxt
Les modules sont le mécanisme d’extension officiel de Nuxt. Ils s’installent dans nuxt.config.ts et s’intègrent à la compilation, à l’exécution et au serveur de développement. La plupart des fonctionnalités de l’écosystème sont des modules.
Installer un module
Installez le module avec npm, puis ajoutez-le à modules dans nuxt.config.ts.
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxt/image',
'@sidebase/nuxt-auth',
'@nuxtjs/i18n'
]
});@nuxt/image
Remplace <img> par des <NuxtImg> optimisées — formatage automatique (WebP/AVIF), srcset réactif, chargement différé, intégration 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 pour la direction artistique
<NuxtPicture> génère un élément <picture> comprenant plusieurs balises <source> pour la direction artistique.
<NuxtPicture src="/hero.jpg" alt="" :imgAttrs="{ width: 1200, height: 600 }" />Configuration du fournisseur d’images
Configurez un fournisseur CDN (Cloudinary, imgix, Vercel, etc.) afin que toutes les images passent par celui-ci.
export default defineNuxtConfig({
modules: ['@nuxt/image'],
image: {
provider: 'cloudinary',
cloudinary: { baseURL: 'https://res.cloudinary.com/yourname/image/fetch/' }
}
});@sidebase/nuxt-auth (Authentification)
Module d’authentification proposant plusieurs fournisseurs : OAuth compatible avec NextAuth, identifiants locaux et flux personnalisés.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@sidebase/nuxt-auth'],
auth: {
baseURL: process.env.AUTH_ORIGIN,
provider: { type: 'authjs' }
}
});Utiliser l’authentification dans les pages
La fonction useAuth() expose la session, le statut et 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>Protéger les routes avec un intergiciel
Utilisez l’intergiciel d’authentification sur une page pour exiger une authentification.
<script setup>
definePageMeta({ middleware: 'auth' });
</script>@nuxtjs/i18n (Internationalisation)
Le module officiel d’internationalisation prend en charge plusieurs langues, les routes préfixées par la langue, les fichiers de traduction chargés à la demande et l’attribut hreflang adapté au référencement.
export default defineNuxtConfig({
modules: ['@nuxtjs/i18n'],
i18n: {
locales: [
{ code: 'en', file: 'en.json' },
{ code: 'tr', file: 'tr.json' }
],
defaultLocale: 'en',
lazy: true,
langDir: 'locales/'
}
});Traduire dans les composants
Utilisez $t dans les modèles ou useI18n dans 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>Routes préfixées par la langue
Les URL deviennent /en/about et /tr/about. Utilisez localePath('/about') pour générer des liens correctement préfixés.
<NuxtLink :to="localePath('/profile')">{{ $t('profile') }}</NuxtLink>Autres modules populaires
@pinia/nuxt (gestion de l’état), @vueuse/nuxt (plus de 200 fonctions réutilisables), @nuxtjs/tailwindcss (configuration de Tailwind), @nuxtjs/color-mode (mode sombre), @nuxt/content (CMS fondé sur des fichiers).
Écrire un module personnalisé
Pour les fonctionnalités internes d’un dépôt unique, écrivez un module qui s’intègre au cycle de vie de Nuxt. Les modules sont puissants : ils enregistrent des composants, la configuration d’exécution, des routes serveur et des étapes de compilation.
Vérification rapide
Quel module de Nuxt 3 fournit un chargement d’images optimisé avec WebP/AVIF automatique et un srcset réactif ?
Récapitulatif : modules Nuxt
Les modules étendent Nuxt — ils sont installés via le tableau modules dans nuxt.config.ts. @nuxt/image sert aux images optimisées (formatage automatique, srcset, chargement différé). @sidebase/nuxt-auth (ou nuxt-auth) sert à l’authentification. @nuxtjs/i18n sert aux traductions et aux routes préfixées par la langue. Également : @pinia/nuxt, @vueuse/nuxt, @nuxtjs/tailwindcss et @nuxt/content. Écrivez des modules personnalisés pour les réutiliser en interne.
Questions Fréquemment Posées
La leçon « Modules Nuxt : images, authentification et i18n » est-elle gratuite ?
Oui — le texte complet de « Modules Nuxt : images, authentification et i18n » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Modules Nuxt : images, authentification et i18n » ?
Installez et configurez @nuxt/image pour optimiser les images, @nuxtjs/auth-next pour l’authentification et @nuxtjs/i18n pour l’internationalisation. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Modules Nuxt : images, authentification et i18n » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Routage fondé sur les fichiers et imports automatiques
- useFetch et useAsyncData
- Modules Nuxt : images, authentification et i18n
- Déploiement : statique ou SSR