Tạo dự án Nuxt đầu tiên

Sau khi đã cài đặt môi trường và khởi tạo project Nuxt, trong bài học này bạn sẽ được hướng dẫn tạo trang đầu tiên trong ứng dụng, chạy thử trên trình duyệt, chỉnh sửa nội dung để kiểm tra khả năng cập nhật nhanh (HMR), và làm quen với file cấu hình chính của Nuxt – nuxt.config.ts. Đây là bước khởi động nhẹ nhàng nhưng rất thiết thực để làm chủ cách Nuxt vận hành.

Mục tiêu bài học

• Tạo và hiển thị trang đầu tiên trong Nuxt thông qua thư mục pages
• Thực hành chạy project và truy cập qua trình duyệt
• Hiểu và quan sát tính năng Hot Module Replacement (HMR)
• Làm quen với file cấu hình nuxt.config.ts và vai trò của nó

Tạo dự án

1. Tạo trang đầu tiên với Nuxt

Trong Nuxt, mỗi file .vue trong thư mục pages/ tự động trở thành một route tương ứng.

Thực hành: Mở thư mục dự án vừa khởi tạo, tạo file sau:

pages/index.vue:

<template>
  <div>
    <h1>Chào mừng đến với Nuxt 3!</h1>
    <p>Đây là trang đầu tiên của bạn.</p>
  </div>
</template>

Lưu ý: nếu pages/index.vue đã có sẵn khi khởi tạo bằng nuxi, bạn có thể sửa nội dung trong đó.

2. Chạy thử và kiểm tra kết quả

Trong terminal:

npm run dev

Mở trình duyệt và truy cập:

http://localhost:3000

Bạn sẽ thấy nội dung bạn viết trong pages/index.vue được hiển thị trực tiếp. Đây là cách Nuxt tự động mapping URL → file .vue.

3. Thử chỉnh sửa file và quan sát HMR (Hot Module Replacement)

Bây giờ thử đổi nội dung file:

<template>
  <div>
    <h1>Đây là nội dung mới được cập nhật</h1>
    <p>Nuxt reload tự động mà không cần refresh!</p>
  </div>
</template>

• Lưu lại file và quay lại trình duyệt
• Bạn sẽ thấy nội dung được cập nhật ngay lập tức mà không cần reload thủ công

Đây là HMR – tính năng giúp bạn lập trình nhanh và tiện hơn rất nhiều.

4. Giới thiệu tệp cấu hình nuxt.config.ts

File nuxt.config.ts là trung tâm cấu hình của Nuxt project. Nó cho phép bạn:

• Thêm/tắt modules (Tailwind, Image, i18n…)
• Cấu hình global CSS, meta, plugin
• Chỉnh SSR/SSG/SPA mode
• Định nghĩa runtime config, middleware, alias…

Ví dụ nội dung cơ bản:

// nuxt.config.ts
export default defineNuxtConfig({
  css: ["~/assets/css/main.css"],
  modules: ["@nuxtjs/tailwindcss"],
  app: {
    head: {
      title: "Khóa học Nuxt",
      meta: [
        { name: "description", content: "Dự án Nuxt đầu tiên" },
      ]
    }
  }
})

Bạn chưa cần hiểu hết ngay. Chỉ cần biết: mọi config chung của dự án đều tập trung ở đây.

Kết luận

Qua bài học này, bạn đã tạo được trang đầu tiên trong Nuxt một cách đơn giản, chạy thử được trên trình duyệt, trải nghiệm khả năng cập nhật nóng (HMR) tiện lợi, và biết đến tệp nuxt.config.ts – trái tim cấu hình của toàn bộ project. Đây là nền tảng để bạn tiếp tục xây dựng hệ thống trang, layout, API, và các tính năng phức tạp hơn trong những bài tiếp theo.