Nuxt 모듈: 이미지, 인증, 다국어

Nuxt 모듈이란?

모듈 설치

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/image',
    '@sidebase/nuxt-auth',
    '@nuxtjs/i18n'
  ]
});

@nuxt/image

<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

<NuxtPicture src="/hero.jpg" alt="" :imgAttrs="{ width: 1200, height: 600 }" />

이미지 제공자 구성

export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    provider: 'cloudinary',
    cloudinary: { baseURL: 'https://res.cloudinary.com/yourname/image/fetch/' }
  }
});

@sidebase/nuxt-auth(인증)

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@sidebase/nuxt-auth'],
  auth: {
    baseURL: process.env.AUTH_ORIGIN,
    provider: { type: 'authjs' }
  }
});

페이지에서 인증 사용하기

<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>

미들웨어로 경로 보호하기

<script setup>
definePageMeta({ middleware: 'auth' });
</script>

@nuxtjs/i18n(국제화)

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: [
      { code: 'en', file: 'en.json' },
      { code: 'tr', file: 'tr.json' }
    ],
    defaultLocale: 'en',
    lazy: true,
    langDir: 'locales/'
  }
});

컴포넌트에서 번역하기

<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>

로캘 접두사가 붙은 경로

<NuxtLink :to="localePath('/profile')">{{ $t('profile') }}</NuxtLink>

그 밖의 인기 모듈

사용자 지정 모듈 작성하기

빠른 확인

복습: Nuxt 모듈