Модули Nuxt: изображения, аутентификация и интернационализация
Установите и настройте @nuxt/image для оптимизированных изображений, @nuxtjs/auth-next для аутентификации и @nuxtjs/i18n для интернационализации
«Модули Nuxt: изображения, аутентификация и интернационализация» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Что такое модули Nuxt
Модули — официальный механизм расширения Nuxt. Они устанавливаются в nuxt.config.ts и подключаются к сборке, среде выполнения и серверу разработки. Большинство возможностей экосистемы реализовано в виде модулей.
Установка модуля
Установите модуль с помощью npm, затем добавьте его в modules в nuxt.config.ts.
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxt/image',
'@sidebase/nuxt-auth',
'@nuxtjs/i18n'
]
});@nuxt/image
Заменяет <img> на оптимизированный <NuxtImg> — автоматический выбор формата (WebP/AVIF), адаптивный srcset, отложенная загрузка и интеграция с 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 для художественного оформления
<NuxtPicture> создаёт элемент <picture> с несколькими тегами <source> для художественного оформления.
<NuxtPicture src="/hero.jpg" alt="" :imgAttrs="{ width: 1200, height: 600 }" />Настройка поставщика изображений
Настройте поставщика CDN (Cloudinary, imgix, Vercel и т. д.), чтобы все изображения проходили через него.
export default defineNuxtConfig({
modules: ['@nuxt/image'],
image: {
provider: 'cloudinary',
cloudinary: { baseURL: 'https://res.cloudinary.com/yourname/image/fetch/' }
}
});@sidebase/nuxt-auth (аутентификация)
Модуль аутентификации с несколькими поставщиками: совместимый с NextAuth OAuth, локальные учётные данные и пользовательские процессы.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@sidebase/nuxt-auth'],
auth: {
baseURL: process.env.AUTH_ORIGIN,
provider: { type: 'authjs' }
}
});Использование аутентификации на страницах
Композируемая функция useAuth() предоставляет данные сеанса, состояние и 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>Защита маршрутов с помощью промежуточного ПО
Используйте промежуточное ПО аутентификации на странице, чтобы требовать аутентификацию.
<script setup>
definePageMeta({ middleware: 'auth' });
</script>@nuxtjs/i18n (интернационализация)
Официальный модуль интернационализации поддерживает несколько языков, маршруты с префиксами локали, отложенную загрузку файлов переводов и удобный для SEO атрибут 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 в шаблонах или useI18n в 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>Маршруты с префиксом локали
URL становятся такими: /en/about, /tr/about. Используйте localePath('/about'), чтобы создавать ссылки с правильным префиксом.
<NuxtLink :to="localePath('/profile')">{{ $t('profile') }}</NuxtLink>Другие популярные модули
@pinia/nuxt (управление состоянием), @vueuse/nuxt (более 200 композируемых функций), @nuxtjs/tailwindcss (настройка Tailwind), @nuxtjs/color-mode (тёмная тема), @nuxt/content (CMS на основе файлов).
Написание собственного модуля
Для функциональности внутреннего монорепозитория напишите модуль, подключающийся к жизненному циклу Nuxt. Модули очень мощные: они регистрируют компоненты, конфигурацию среды выполнения, серверные маршруты и этапы сборки.
Быстрая проверка
Какой модуль Nuxt 3 обеспечивает оптимизированную загрузку изображений с автоматическим использованием WebP/AVIF и адаптивным srcset?
Итоги: модули Nuxt
Модули расширяют Nuxt и устанавливаются через массив modules в nuxt.config.ts. @nuxt/image предназначен для оптимизированных изображений (автоматический выбор формата, srcset, отложенная загрузка). @sidebase/nuxt-auth (или nuxt-auth) — для аутентификации. @nuxtjs/i18n — для переводов и маршрутов с префиксами локали. Также доступны @pinia/nuxt, @vueuse/nuxt, @nuxtjs/tailwindcss и @nuxt/content. Для внутреннего повторного использования пишите собственные модули.
Часто задаваемые вопросы
Урок «Модули Nuxt: изображения, аутентификация и интернационализация» бесплатный?
Да — полный текст урока «Модули Nuxt: изображения, аутентификация и интернационализация» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Модули Nuxt: изображения, аутентификация и интернационализация»?
Установите и настройте @nuxt/image для оптимизированных изображений, @nuxtjs/auth-next для аутентификации и @nuxtjs/i18n для интернационализации Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Модули Nuxt: изображения, аутентификация и интернационализация»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Файловая маршрутизация и автоматические импорты
- useFetch и useAsyncData
- Модули Nuxt: изображения, аутентификация и интернационализация
- Развёртывание: статика и SSR