BÀI 2: KHỞI TẠO DỰ ÁN NUXTJS ĐẦU TIÊN

Tiếp tục với Bài 2 – Khởi tạo dự án NuxtJS đầu tiên bằng nuxi. Đây là bước quan trọng để bắt đầu làm việc với Nuxt, giúp bạn hiểu rõ cấu trúc của một project Nuxt tiêu chuẩn.

---

1. Cài đặt Nuxt CLI (nuxi)

Trước tiên, bạn cần cài nuxi – công cụ CLI chính thức của Nuxt 3:

📋 Copynpm install -g nuxi

Bạn có thể kiểm tra phiên bản:

📋 Copynuxi --version

2. Tạo dự án mới

Chạy lệnh sau trong terminal:

📋 Copynuxi init nuxt-app
cd nuxt-app
npm install

Thư mục nuxt-app/ sẽ được tạo với đầy đủ file mặc định của Nuxt 3.

3. Cấu trúc thư mục mặc định

Sau khi cài xong, bạn sẽ thấy:

📋 Copynuxt-app/
├── app.vue              → Root layout
├── nuxt.config.ts       → File cấu hình chính
├── pages/               → Tạo route tự động
├── components/          → Component tùy chỉnh
├── layouts/             → Layout động
├── assets/              → CSS, ảnh, font
├── public/              → File tĩnh
├── middleware/          → Middleware route

Mỗi folder có vai trò riêng biệt. Bạn không cần setup router thủ công như Vue CLI.

4. Chạy thử ứng dụng

Chạy dev server bằng lệnh:

📋 Copynpm run dev

Bạn sẽ thấy:

📋 CopyNuxt 3 ready
Local: http://localhost:3000

Truy cập trình duyệt để kiểm tra.

5. Tạo thử một trang đầu tiên

Tạo file pages/about.vue với nội dung:

📋 Copy<template>
  <h1>Trang Giới thiệu</h1>
</template>

Truy cập http://localhost:3000/about sẽ hiển thị trang vừa tạo.

Không cần cấu hình route, không cần import – Nuxt tự xử lý.

---

Bạn đã học được

• Cài đặt và khởi tạo app Nuxt bằng nuxi
• Cấu trúc project tiêu chuẩn của Nuxt
• Cách chạy server và tạo route động đầu tiên

---

Ghi chú mở rộng

• Nuxt mặc định dùng TypeScript (.ts) cho file config, nhưng bạn có thể dùng .js nếu thích
• Tất cả file trong pages/ sẽ tự động trở thành route
• Mỗi trang sẽ được bọc trong app.vue (root layout)