Xây Dựng Ứng Dụng Full-Stack Thần Tốc với Nuxt Server Routes (Không Cần Backend Riêng!)

Lê Lân

09/07/2025

Nuxt Server Routes: Xây Dựng Ứng Dụng Full-Stack Không Cần Backend Riêng

Mở Đầu

Bạn đã bao giờ nghe đến khái niệm full-stack nhưng vẫn nghĩ rằng cần phải có hai ứng dụng frontend và backend riêng biệt chưa? Điều đó giờ đây không còn là rào cản với Nuxt Server Routes.

Trong bài viết này, chúng ta sẽ khám phá sức mạnh của Nuxt Server Routes — tính năng cho phép xây dựng một ứng dụng full-stack hoàn chỉnh mà không cần phải tạo và duy trì một backend tách biệt. Nhờ Nuxt Server Routes, bạn có thể viết API ngay bên trong dự án Nuxt của mình, tận dụng tối đa khả năng của framework mà không phải lo lắng về việc triển khai và đồng bộ nhiều ứng dụng khác nhau.

Chúng ta sẽ cùng tìm hiểu khái niệm, điểm nổi bật, lợi ích của Nuxt Server Routes, và thực hành xây dựng một ứng dụng ghi chú đơn giản với Nuxt và Prisma (ORM) dùng SQLite. Hãy bắt đầu ngay nào!

Nuxt Server Routes Là Gì?

Khái Niệm Cơ Bản

Trong Nuxt 3, mọi tệp tin được xuất ra nằm trong thư mục /server tự động trở thành API route phía server. Bạn chỉ cần tạo file tương ứng và định nghĩa handler là xong, ví dụ:

// /server/api/hello.ts
export default defineEventHandler(() => {
  return { message: 'Hello from the server!' }
})

Truy cập /api/hello trên trình duyệt sẽ nhận được JSON trả về:

{
  "message": "Hello from the server!"
}

Tại Sao Nó Được Gọi Là “Phép Thuật”?

Nuxt Server Routes tạo ra sự đơn giản đỉnh cao:

Không cần tạo ứng dụng backend riêng biệt.

Tự động cấu hình các API route.

Quá trình phát triển API nhanh chóng.

Hỗ trợ TypeScript nguyên bản.

Rất thích hợp cho các app “backend nhẹ” như blog, dashboard, hoặc MVP SaaS.

Bạn chỉ cần đẩy code vào thư mục /server và Nuxt sẽ tự biến chúng thành API mà không cần cấu hình tẻ nhạt nào khác.

Xây Dựng Ứng Dụng Ghi Chú Đơn Giản Với Nuxt Server Routes

Chúng ta sẽ cùng tạo một ứng dụng dạng "Notes" nơi người dùng có thể tạo và xem danh sách ghi chú. Công nghệ sử dụng gồm:

Nuxt 3 (frontend & backend cùng một dự án)

Prisma ORM kết nối với SQLite (database nhẹ, nhanh)

1. Khởi Tạo Dự Án Nuxt

npx nuxi init nuxt-notes-app
cd nuxt-notes-app
npm install

2. Cài Đặt Prisma & Khởi Tạo SQLite

npm install prisma @prisma/client
npx prisma init --datasource-provider sqlite

3. Cấu Hình Prisma Schema

Trong prisma/schema.prisma , chỉnh sửa như sau:

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

generator client {
  provider = "prisma-client-js"
}

model Note {
  id    Int    @id @default(autoincrement())
  title String
  body  String
}

4. Sinh Prisma Client và Đồng Bộ Cơ Sở Dữ Liệu

npx prisma generate
npx prisma db push

Bạn đã sở hữu cơ sở dữ liệu SQLite với bảng Note hoạt động.

5. Tạo Server Route Đọc Dữ Liệu

Tạo file /server/api/notes/index.ts :

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

export default defineEventHandler(async (event) => {
  return await prisma.note.findMany()
})

6. Tạo Server Route Ghi Dữ Liệu

Tạo file /server/api/notes/create.ts :

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  return await prisma.note.create({
    data: {
      title: body.title,
      body: body.body,
    },
  })
})

7. Tạo Trang Chủ Với Giao Diện Quản Lý Ghi Chú

File /pages/index.vue :

<script setup lang="ts">
const notes = ref([])
const newNote = ref({ title: '', body: '' })

async function fetchNotes() {
  notes.value = await useFetch('/api/notes')
}

async function createNote() {
  await useFetch('/api/notes/create', {
    method: 'POST',
    body: newNote.value,
  })
  newNote.value = { title: '', body: '' }
  await fetchNotes()
}

onMounted(fetchNotes)
</script>

<template>
  <div>
    <h1>My Notes</h1>
    <form @submit.prevent="createNote">
      <input v-model="newNote.title" placeholder="Title" />
      <input v-model="newNote.body" placeholder="Body" />
      <button type="submit">Add Note</button>
    </form>
    <div v-for="note in notes" :key="note.id">
      <h2>{{ note.title }}</h2>
      <p>{{ note.body }}</p>
    </div>
  </div>
</template>

Triển Khai Ứng Dụng Nuxt Server Routes

Phần tuyệt vời là các nền tảng như Vercel hoặc Netlify tự động nhận diện thư mục /server trong dự án Nuxt 3. Bạn không cần cài đặt cấu hình phức tạp, chỉ việc deploy là xong!

Tuy nhiên, nên lưu ý:

SQLite phù hợp cho môi trường phát triển hoặc demo.

Khi deploy thực tế, nên chọn các dịch vụ database như Railway, PlanetScale, hoặc Supabase.

Tổng Kết

Nuxt Server Routes đem lại trải nghiệm phát triển full-stack chưa từng có: gọn nhẹ, nhanh chóng, trực quan và vẫn giữ được đẳng cấp chuyên nghiệp. Đây là lựa chọn tuyệt vời để xây dựng MVP, dự án cá nhân, hoặc các ứng dụng không quá phức tạp về backend.

Hãy thử áp dụng ngay hôm nay và tận hưởng sự thú vị của coding không rườm rà! Happy coding! 🖥️

Tham Khảo

Nuxt 3 Documentation - Server Routes

Prisma Official Docs

Deploying Nuxt 3 on Vercel

SQLite on Railway