Nuxt-moduulit: Image, Auth ja i18n
Asenna ja määritä @nuxt/image optimoituja kuvia, @nuxtjs/auth-next todennusta ja @nuxtjs/i18n kansainvälistämistä varten.
Nuxt-moduulit: Image, Auth ja i18n on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä Nuxt-moduulit ovat?
Moduulit ovat Nuxtin virallinen laajennusmekanismi. Ne asennetaan nuxt.config.ts-tiedostossa, ja ne voivat kytkeytyä koontiin, ajonaikaiseen ympäristöön ja kehityspalvelimeen. Useimmat ekosysteemin ominaisuudet ovat moduuleja.
Moduulin asentaminen
Asentakaa moduuli komennolla npm install ja lisätkää se nuxt.config.ts-tiedoston modules-määritykseen.
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxt/image',
'@sidebase/nuxt-auth',
'@nuxtjs/i18n'
]
});@nuxt/image
Korvaa <img>-elementin optimoidulla <NuxtImg>-elementillä — automaattinen muodon valinta (WebP/AVIF), responsiivinen srcset, laiska lataus ja CDN-integraatio.
<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 taidesuuntaukseen
<NuxtPicture> luo <picture>-elementin, jossa on useita <source>-tunnisteita taidesuuntausta varten.
<NuxtPicture src="/hero.jpg" alt="" :imgAttrs="{ width: 1200, height: 600 }" />Kuvapalveluntarjoajan määritys
Määrittäkää CDN-palveluntarjoaja (Cloudinary, imgix, Vercel jne.), jotta kaikki kuvat ohjataan sen kautta.
export default defineNuxtConfig({
modules: ['@nuxt/image'],
image: {
provider: 'cloudinary',
cloudinary: { baseURL: 'https://res.cloudinary.com/yourname/image/fetch/' }
}
});@sidebase/nuxt-auth (todennus)
Todennusmoduuli, joka tukee useita palveluntarjoajia: NextAuth-yhteensopivaa OAuthia, paikallisia tunnistetietoja ja mukautettuja työnkulkuja.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@sidebase/nuxt-auth'],
auth: {
baseURL: process.env.AUTH_ORIGIN,
provider: { type: 'authjs' }
}
});Todennuksen käyttäminen sivuilla
useAuth()-composable tarjoaa istunnon, tilan sekä signIn- ja signOut-toiminnot.
<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>Reittien suojaaminen väliohjelmistolla
Käyttäkää sivulla auth-väliohjelmistoa edellyttääksenne todennusta.
<script setup>
definePageMeta({ middleware: 'auth' });
</script>@nuxtjs/i18n (kansainvälistäminen)
Virallinen i18n-moduuli tukee useita kieliä, locale-etuliitteisiä reittejä, laiskasti ladattavia käännöstiedostoja ja SEO-ystävällistä hreflang-määritystä.
export default defineNuxtConfig({
modules: ['@nuxtjs/i18n'],
i18n: {
locales: [
{ code: 'en', file: 'en.json' },
{ code: 'tr', file: 'tr.json' }
],
defaultLocale: 'en',
lazy: true,
langDir: 'locales/'
}
});Kääntäminen komponenteissa
Käyttäkää malleissa $t-funktiota tai setup-osiossa useI18n-funktiota.
<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>Locale-etuliitteiset reitit
URL-osoitteista tulee /en/about ja /tr/about. Käyttäkää localePath('/about')-funktiota luodaksenne oikein etuliitteistetyt linkit.
<NuxtLink :to="localePath('/profile')">{{ $t('profile') }}</NuxtLink>Muita suosittuja moduuleja
@pinia/nuxt (tilanhallinta), @vueuse/nuxt (yli 200 composablea), @nuxtjs/tailwindcss (Tailwind-asetukset), @nuxtjs/color-mode (tumma tila), @nuxt/content (tiedostopohjainen CMS).
Mukautetun moduulin kirjoittaminen
Kirjoittakaa sisäistä monorepo-toiminnallisuutta varten moduuli, joka kytkeytyy Nuxtin elinkaareen. Moduulit ovat tehokkaita: niillä voi rekisteröidä komponentteja, ajonaikaisen määrityksen, palvelinreittejä ja koontivaiheita.
Pikatarkistus
Mikä Nuxt 3 -moduuli tarjoaa optimoidun kuvien latauksen automaattisella WebP/AVIF-muodolla ja responsiivisella srcsetillä?
Kertaus: Nuxt-moduulit
Moduulit laajentavat Nuxtia — ne asennetaan nuxt.config.ts-tiedoston modules-taulukon kautta. @nuxt/image optimoi kuvat (automaattinen muodon valinta, srcset, laiska lataus). @sidebase/nuxt-auth (tai nuxt-auth) tarjoaa todennuksen. @nuxtjs/i18n tarjoaa käännökset ja locale-etuliitteiset reitit. Lisäksi käytettävissä ovat @pinia/nuxt, @vueuse/nuxt, @nuxtjs/tailwindcss ja @nuxt/content. Kirjoittakaa mukautettuja moduuleja sisäistä uudelleenkäyttöä varten.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Nuxt-moduulit: Image, Auth ja i18n” ilmainen?
Kyllä – oppitunnin ”Nuxt-moduulit: Image, Auth ja i18n” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Nuxt-moduulit: Image, Auth ja i18n”?
Asenna ja määritä @nuxt/image optimoituja kuvia, @nuxtjs/auth-next todennusta ja @nuxtjs/i18n kansainvälistämistä varten. Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Nuxt-moduulit: Image, Auth ja i18n”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Tiedostopohjainen reititys ja automaattiset tuonnit
- useFetch ja useAsyncData
- Nuxt-moduulit: Image, Auth ja i18n
- Käyttöönotto: staattinen vai SSR