Moduły Nuxt: obrazy, uwierzytelnianie i i18n
Zainstaluje i skonfiguruje Pan/Pani @nuxt/image do optymalizacji obrazów, @nuxtjs/auth-next do uwierzytelniania oraz @nuxtjs/i18n do umiędzynarodowienia.
Moduły Nuxt: obrazy, uwierzytelnianie i i18n to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym są moduły Nuxt?
Moduły są oficjalnym mechanizmem rozszerzania Nuxt. Instaluje się je w nuxt.config.ts, gdzie mogą podłączać się do procesu budowania, środowiska uruchomieniowego i serwera deweloperskiego. Większość funkcji ekosystemu jest dostarczana w postaci modułów.
Instalowanie modułu
Należy zainstalować moduł poleceniem npm install, a następnie dodać go do modules w nuxt.config.ts.
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxt/image',
'@sidebase/nuxt-auth',
'@nuxtjs/i18n'
]
});@nuxt/image
Zastępuje <img> elementem <NuxtImg> — automatyczny dobór formatu (WebP/AVIF), responsywne srcset, leniwe ładowanie i integracja z 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 na potrzeby art direction
<NuxtPicture> generuje element <picture> z wieloma tagami <source> na potrzeby art direction.
<NuxtPicture src="/hero.jpg" alt="" :imgAttrs="{ width: 1200, height: 600 }" />Konfiguracja dostawcy obrazów
Należy skonfigurować dostawcę CDN (Cloudinary, imgix, Vercel itd.), aby wszystkie obrazy były przez niego obsługiwane.
export default defineNuxtConfig({
modules: ['@nuxt/image'],
image: {
provider: 'cloudinary',
cloudinary: { baseURL: 'https://res.cloudinary.com/yourname/image/fetch/' }
}
});@sidebase/nuxt-auth (uwierzytelnianie)
Moduł uwierzytelniania z wieloma dostawcami: OAuth zgodny z NextAuth, lokalne dane uwierzytelniające i niestandardowe przepływy.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@sidebase/nuxt-auth'],
auth: {
baseURL: process.env.AUTH_ORIGIN,
provider: { type: 'authjs' }
}
});Używanie uwierzytelniania na stronach
Composable useAuth() udostępnia sesję, status oraz 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>Ochrona tras za pomocą middleware
Należy użyć middleware uwierzytelniania na stronie, aby wymagać uwierzytelnienia.
<script setup>
definePageMeta({ middleware: 'auth' });
</script>@nuxtjs/i18n (internacjonalizacja)
Oficjalny moduł i18n obsługuje wiele języków, trasy z prefiksem lokalizacji, leniwie ładowane pliki tłumaczeń oraz przyjazny dla SEO atrybut hreflang.
export default defineNuxtConfig({
modules: ['@nuxtjs/i18n'],
i18n: {
locales: [
{ code: 'en', file: 'en.json' },
{ code: 'tr', file: 'tr.json' }
],
defaultLocale: 'en',
lazy: true,
langDir: 'locales/'
}
});Tłumaczenie w komponentach
Należy używać $t w szablonach lub useI18n w 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>Trasy z prefiksem lokalizacji
Adresy URL przyjmują postać /en/about, /tr/about. Należy użyć localePath('/about'), aby generować linki z prawidłowym prefiksem.
<NuxtLink :to="localePath('/profile')">{{ $t('profile') }}</NuxtLink>Inne popularne moduły
@pinia/nuxt (zarządzanie stanem), @vueuse/nuxt (ponad 200 composables), @nuxtjs/tailwindcss (konfiguracja Tailwind), @nuxtjs/color-mode (tryb ciemny), @nuxt/content (CMS oparty na plikach).
Pisanie własnego modułu
Na potrzeby funkcji wewnętrznych monorepo należy napisać moduł, który podłącza się do cyklu życia Nuxt. Moduły są potężnym mechanizmem: mogą rejestrować komponenty, konfigurację środowiska uruchomieniowego, trasy serwera i kroki budowania.
Szybkie sprawdzenie
Który moduł Nuxt 3 zapewnia zoptymalizowane ładowanie obrazów z automatycznym użyciem WebP/AVIF i responsywnym srcset?
Podsumowanie: moduły Nuxt
Moduły rozszerzają Nuxt — instaluje się je za pomocą tablicy modules w nuxt.config.ts. @nuxt/image służy do obsługi zoptymalizowanych obrazów (automatyczny dobór formatu, srcset, leniwe ładowanie). @sidebase/nuxt-auth (lub nuxt-auth) służy do uwierzytelniania. @nuxtjs/i18n obsługuje tłumaczenia i trasy z prefiksem lokalizacji. Dostępne są również: @pinia/nuxt, @vueuse/nuxt, @nuxtjs/tailwindcss i @nuxt/content. Własne moduły warto pisać na potrzeby wewnętrznego ponownego użycia.
Często zadawane pytania
Czy lekcja „Moduły Nuxt: obrazy, uwierzytelnianie i i18n” jest bezpłatna?
Tak — pełny tekst „Moduły Nuxt: obrazy, uwierzytelnianie i i18n” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Moduły Nuxt: obrazy, uwierzytelnianie i i18n”?
Zainstaluje i skonfiguruje Pan/Pani @nuxt/image do optymalizacji obrazów, @nuxtjs/auth-next do uwierzytelniania oraz @nuxtjs/i18n do umiędzynarodowienia. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Moduły Nuxt: obrazy, uwierzytelnianie i i18n”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Routing oparty na plikach i automatyczny import
- useFetch i useAsyncData
- Moduły Nuxt: obrazy, uwierzytelnianie i i18n
- Wdrażanie: statyczne a SSR