Frontend Academy · บทเรียน

โมดูล Nuxt: รูปภาพ การยืนยันตัวตน และ i18n

ติดตั้งและตั้งค่า @nuxt/image สำหรับรูปภาพที่ปรับประสิทธิภาพแล้ว @nuxtjs/auth-next สำหรับการยืนยันตัวตน และ @nuxtjs/i18n สำหรับการทำให้เป็นสากล

โมดูล Nuxt: รูปภาพ การยืนยันตัวตน และ i18n เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

โมดูล Nuxt คืออะไร

โมดูลคือกลไกส่วนขยายอย่างเป็นทางการของ Nuxt โดยติดตั้งใน nuxt.config.ts และเชื่อมต่อเข้ากับกระบวนการบิลด์ รันไทม์ และเซิร์ฟเวอร์สำหรับการพัฒนา ฟีเจอร์ส่วนใหญ่ในระบบนิเวศของ Nuxt อยู่ในรูปแบบโมดูล

การติดตั้งโมดูล

ติดตั้งโมดูลด้วย 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 (การยืนยันตัวตน)

โมดูลการยืนยันตัวตนที่รองรับผู้ให้บริการหลายรูปแบบ ได้แก่ OAuth ที่เข้ากันได้กับ NextAuth ข้อมูลประจำตัวภายในระบบ และโฟลว์แบบกำหนดเอง

// 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 (การทำให้เป็นสากล)

โมดูล i18n อย่างเป็นทางการรองรับหลายภาษา เส้นทางที่มีรหัสภาษานำหน้า ไฟล์คำแปลที่โหลดแบบขี้เกียจ และ hreflang ที่เป็นมิตรต่อ SEO

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 โมดูลมีความสามารถสูง สามารถลงทะเบียนคอมโพเนนต์ runtime config เส้นทางเซิร์ฟเวอร์ และขั้นตอนการบิลด์ได้

ตรวจสอบความเข้าใจ

โมดูล 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: รูปภาพ การยืนยันตัวตน และ i18n” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “โมดูล Nuxt: รูปภาพ การยืนยันตัวตน และ i18n” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “โมดูล Nuxt: รูปภาพ การยืนยันตัวตน และ i18n”

ติดตั้งและตั้งค่า @nuxt/image สำหรับรูปภาพที่ปรับประสิทธิภาพแล้ว @nuxtjs/auth-next สำหรับการยืนยันตัวตน และ @nuxtjs/i18n สำหรับการทำให้เป็นสากล คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “โมดูล Nuxt: รูปภาพ การยืนยันตัวตน และ i18n” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

การกำหนดเส้นทางตามไฟล์และการนำเข้าอัตโนมัติ
useFetch และ useAsyncData
โมดูล Nuxt: รูปภาพ การยืนยันตัวตน และ i18n
การนำไปใช้งาน: สแตติกเทียบกับ SSR

← กลับไปที่ Frontend Academy