Giới Thiệu Về Nuxt 3

Nuxt 3 là một framework mã nguồn mở được xây dựng trên nền tảng VueJS, mang đến cho người dùng khả năng phát triển website nhanh chóng và tiện lợi hơn. Với nhiều tính năng hỗ trợ hiệu suất, trải nghiệm người dùng (UX) và tối ưu hóa SEO, Nuxt 3 trở thành bộ công cụ mạnh mẽ cho việc xây dựng website.

Nghiên Cứu Cơ Bản Về Nuxt 3

Cài Đặt Nuxt 3

Để bắt đầu với Nuxt 3, bạn có thể sử dụng các lệnh sau để khởi tạo dự án mới:

pnpm dlx nuxi@latest init <tên-dự-án>

npx nuxi@latest init <tên-dự-án>

Các Khái Niệm Chính Trong Nuxt 3

Page

• Trang (Page) là một file hiển thị giao diện cho một route cụ thể, được tạo trong thư mục pages/. Ví dụ:

<template>
  <div>
    <h1>Chào mừng đến với trang chủ</h1>
    <AppAlert>
      Đây là một thành phần tự động nhập khẩu
    </AppAlert>
  </div>
</template>

Layout

• Layout là tập hợp các thành phần UI chung cho nhiều trang. Ví dụ, các trang có thể chia sẻ cùng một tiêu đề và chân trang (footer). Mặc định, file layouts/default.vue sẽ được sử dụng cho mọi trang. Để tạo layout tùy chỉnh, hãy thêm file layout vào thư mục layouts/:

<!-- Layout Tùy Chỉnh -->
<template>
  <div>
    <p>Layout Tùy Chỉnh</p>
    <slot />
  </div>
</template>

<!-- Thiết lập layout tùy chỉnh -->
<script setup lang="ts">
definePageMeta({
  layout: 'custom'
})
</script>

Component

• Components là các phần UI được chia nhỏ để tái sử dụng, được lưu trong thư mục components/. Nuxt hỗ trợ tự động nhận diện components dựa trên tên file, giúp giảm bớt công việc nhập khẩu trong từng file. Ví dụ:

<!-- components/AppAlert.vue -->
<template>
  <span>
    <slot />
  </span>
</template>

Plugin, Assets và Styles

• Nuxt 3 cung cấp các tính năng bổ sung như plugin, và hỗ trợ quản lý tài sản (assets) và kiểu dáng (styles). Các thư mục chính bao gồm public/ và assets/, giúp tổ chức hình ảnh, font chữ và stylesheets một cách hiệu quả.

Điều Hướng và Routing

• Nuxt tự động tạo route từ các file trong thư mục pages/. Sử dụng component <NuxtLink> để điều hướng giữa các trang. Để lấy thông tin chi tiết về route hiện tại, bạn có thể dùng composable useRoute(). Ví dụ:

<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">Giới thiệu</NuxtLink></li>
        <li><NuxtLink to="/posts/1">Bài viết 1</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

Middleware

• Middleware cho phép thực hiện các tác vụ trước khi chuyển hướng đến các trang. Nuxt hỗ trợ cả middleware định danh và không định danh, nâng cao khả năng tùy chỉnh trong điều hướng.

Quản Lý State

• Nuxt 3 cung cấp composable useState() để quản lý state, và khuyến nghị sử dụng Pinia. Ví dụ:

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    },
  },
})

Chế Độ Render

• Nuxt hỗ trợ nhiều chế độ render (universal, client-side, hybrid), giúp tối ưu hóa hiệu suất và SEO. Chế độ mặc định là universal rendering, cho phép trả về trang đã render hoàn chỉnh từ server. Có thể chuyển đổi qua các chế độ khác dễ dàng qua cấu hình trong nuxt.config.ts.

Tối Ưu SEO

• Sử dụng composable useHead để thiết lập thẻ head cho trang web, giúp tối ưu hóa SEO với việc định nghĩa thẻ meta. Bạn có thể sử dụng các component như <Title>, <Meta>, và <Link> để quản lý thông tin SEO dễ dàng.

Tài Liệu Tham Khảo

Để tìm hiểu thêm về Nuxt 3, bạn có thể tham khảo các nguồn tài liệu hữu ích sau:

• Tài liệu chính thức của Nuxt
• Các module của Nuxt
• Thư viện UI Nuxt
• Khóa học Nuxt 3 trên freeCodeCamp

source: viblo