Mẫu Blog Cơ Bản Nuxt 3 – Bfotool Nuxtjs Base Blog(Vue 3 + TypeScript + Tailwind)

Nếu bạn đang tìm kiếm một mẫu blog Nuxt 3 hiện đại, Bfotool Nuxtjs Base Blog là một giải pháp tuyệt vời. Đây là một ứng dụng blog đầy đủ chức năng được xây dựng bằng Nuxt 3, Vue 3, TypeScript và Tailwind CSS, được thiết kế để giúp các nhà phát triển nhanh chóng xây dựng một blog chuyên nghiệp mà không cần đến phần backend trong quá trình phát triển.

Dự án này bao gồm một lớp API giả lập được hỗ trợ bởi các bộ chặn Axios, mô phỏng một API REST thực sự. Điều này làm cho nó trở nên hoàn hảo để học kiến trúc Nuxt, tạo nguyên mẫu ứng dụng hoặc xây dựng các nền tảng blog sẵn sàng cho môi trường sản xuất.

Bạn có thể khám phá kho lưu trữ tại đây: 👉 https://github.com/bfotool/nuxtjs-base-blog

Bfotool Nuxtjs Base Blog là gì?

Bfotool Nuxtjs Base Blog là một mẫu ứng dụng blog hiện đại được xây dựng bằng các công nghệ frontend mới nhất. Nó cung cấp một giao diện blog hoàn chỉnh với các bài đăng, danh mục, chức năng tìm kiếm và trang liên hệ.

Dự án được thiết kế với kiến trúc Nuxt 3 gọn gàng, giúp dễ hiểu và dễ mở rộng.

Những điểm nổi bật chính bao gồm:

Giao diện blog đầy đủ với thiết kế đáp ứng.
API REST giả lập dành cho việc phát triển mà không cần máy chủ phụ trợ.
Được xây dựng bằng API Composition hiện đại của Vue 3.
Phát triển phần mềm an toàn kiểu dữ liệu với TypeScript
Cấu hình meta sẵn sàng cho SEO
Hỗ trợ chủ đề tối và sáng

Bạn có thể tìm thấy kho lưu trữ tại đây:

👉 https://github.com/bfotool/nuxtjs-base-blog

Mẫu này lý tưởng cho:

Blog cá nhân
Blog của công ty
Danh mục đầu tư của nhà phát triển
Tìm hiểu kiến trúc Nuxt 3
Tạo mẫu nhanh cho các trang web nội dung

Các tính năng chính

C class="ac-h3"Trang Blog Hoàn Chỉnh

Mẫu này bao gồm đầy đủ các trang thường cần thiết trong một nền tảng blog.

Các trang chính bao gồm:

Trang chủ – Hiển thị bài viết nổi bật, bộ lọc danh mục và bài viết được phân trang.
Trang bài viết blog – Xem toàn bộ bài viết với mục lục và các bài viết liên quan.
Trang danh mục – Duyệt bài viết được lọc theo danh mục
Trang tìm kiếm – Tìm kiếm thời gian thực với chức năng chống nhiễu
Trang Giới thiệu – Giới thiệu về đội ngũ, sứ mệnh hoặc thương hiệu của bạn.
Trang Liên hệ – Biểu mẫu liên hệ có xác thực và phản hồi dạng thông báo ngắn.
Trang lỗi – Giao diện người dùng xử lý lỗi tùy chỉnh

Cấu trúc này cung cấp trải nghiệm blog sẵn sàng sử dụng cho người dùng.

< class="ac-h3"h3>Lớp API giả lập dành cho phát triển

Một trong những tính năng mạnh mẽ nhất của dự án này là hệ thống API giả lập .

Thay vì kết nối trực tiếp với máy chủ phụ trợ thực sự, dự án này mô phỏng các phản hồi API bằng cách sử dụng các bộ chặn Axios .

Cách tiếp cận này cho phép các nhà phát triển:

Xây dựng các tính năng giao diện người dùng mà không cần phụ thuộc vào máy chủ.
Kiểm tra chức năng phân trang, lọc và sắp xếp.
Mô phỏng độ trễ phản hồi API thực tế
Dễ dàng chuyển sang sử dụng hệ thống phụ trợ thực sự sau này.

API giả lập bao gồm các điểm cuối như sau:

/posts
/posts/featured
/posts/:slug
/categories
/authors
/contact

Vì API được trừu tượng hóa thông qua thành phần useApi, việc chuyển sang sử dụng backend thực sự chỉ cần cấu hình tối thiểu.

Kiến trúc Nuxt 3 hiện đại

Dự án này tuân theo các mẫu phát triển Nuxt 3 được khuyến nghị, do đó nó là một tài liệu tham khảo tuyệt vời cho các nhà phát triển đang học framework này.

Các đặc điểm kiến trúc quan trọng bao gồm:

Các thành phần và cấu trúc có thể kết hợp được tự động nhập khẩu
Phát triển ưu tiên TypeScript
Lớp dịch vụ API có thể kết hợp
Cấu trúc thư mục dạng mô-đun
Cấu hình meta SEO
Chuyển đổi trang

Ứng dụng này cũng sử dụng:

useSeoMeta()cho thẻ SEO
useColorMode()để chuyển đổi chủ đề
useRoute()và các thành phần có thể kết hợp tích hợp khác của Nuxt

< class="ac-h3"h3>Chế độ tối và thiết kế đáp ứng

Giao diện người dùng hỗ trợ chủ đề tối và sáng bằng cách sử dụng @nuxtjs/color-mode.

Các tính năng bao gồm:

Tự động phát hiện chủ đề hệ thống
Chuyển đổi chủ đề thủ công
Tạo kiểu CSS cho Tailwind
Bố cục đáp ứng ưu tiên thiết bị di động

Điều này đảm bảo blog hoạt động trơn tru trên:

Máy tính để bàn
Viên nén
Thiết bị di động

P class="ac-h3"Các tính năng Blog mạnh mẽ

Mẫu blog này bao gồm một số tính năng nâng cao thường thấy trong các nền tảng blog chuyên nghiệp.

Chúng bao gồm:

Mục lục được tạo từ các tiêu đề Markdown.
Gợi ý bài viết liên quan
Thời gian đọc ước tính
Lọc theo danh mục
Tìm kiếm toàn văn đã được khử nhiễu
Phân trang thông minh
Thông báo dạng pop-up
Đang tải các thành phần khung xương
Hiệu ứng chuyển trang động

Những tính năng này tạo ra trải nghiệm đọc hiện đại cho độc giả của blog.

Ngăn xếp công nghệ

Dự án được xây dựng bằng một nền tảng giao diện người dùng hiện đại.

Lớp	Công nghệ
Khung	Nuxt 3.15
Thư viện giao diện người dùng	Vue 3.5
Ngôn ngữ	TypeScript 5.7
Tạo kiểu	Tailwind CSS 3.4
Quản lý Nhà nước	Pinia
Máy khách HTTP	Axios
Biểu tượng	Biểu tượng hóa thông qua @nuxt/icon
Chủ đề	@nuxtjs/color-mode
Xơ vải	ESLint
Định dạng	Xinh đẹp hơn

Kiến trúc này mang lại hiệu năng, khả năng mở rộng và khả năng bảo trì .

Tổng quan về cấu trúc dự án

Kho lưu trữ này tuân theo một cấu trúc gọn gàng và có tổ chức.

Các thư mục quan trọng bao gồm:

Trang

Thư mục này pagesxác định các tuyến đường chính:

index.vue– Trang chủ
about.vue– Trang giới thiệu
contact.vue– Biểu mẫu liên hệ
search.vue– Giao diện tìm kiếm
blog/[slug].vue– Trang bài đăng trên blog
blog/category/[slug].vue– Trang danh mục

Com class="ac-h3"ponents

Các thành phần giao diện người dùng có thể tái sử dụng được nhóm lại thành các danh mục hợp lý:

layout– Đầu trang và chân trang
common– Phân trang, trình tải khung sườn, thông báo dạng pop-up
blog– Các thành phần dành riêng cho blog như bưu thiếp và mục lục

Comp class="ac-h3"osables

Thư mục composables chứa các logic có thể tái sử dụng.

Các thành phần kết hợp quan trọng bao gồm:

useApi()– Lớp dịch vụ API được định kiểu
useDebounce()– Giá trị phản ứng khử nhiễu

< class="ac-h3"h3>Lớp API giả lập

Hệ thống mô phỏng nằm bên trong mocksthư mục đó.

Nó bao gồm:

handlers.ts– Bộ chặn yêu cầu API
posts.ts– Bài đăng mẫu trên blog
authors.ts– Thông tin tác giả
categories.ts– Dữ liệu danh mục

Cấu trúc này giúp dự án dễ dàng sửa đổi và mở rộng .

Hướng dẫn cài đặt và chạy dự án

Hãy làm theo các bước sau để chạy dự án trên máy tính cục bộ.

Lớp điều kiện tiên quyết="ac-h3"uisites

Bạn cần:

Node.js phiên bản 18.17 trở lên
npm, yarn, hoặc pnpm

Sao chép kho lưu trữ

git clone https://github.com/bfotool/nuxtjs-base-blog.git 
cd nuxtjs-base-blog

class="ac-h3"Cài đặt các gói phụ thuộc

npm install

Khởi động máy chủ phát triển

npm run dev

Sau đó, mở trình duyệt của bạn tại địa chỉ:

http://localhost:3000

Máy chủ phát triển Nuxt sẽ tự động tải lại khi các tệp thay đổi.

Chuyển đổi từ API giả lập sang API thực tế

Một trong những quyết định thiết kế tốt nhất trong dự án này là việc chuyển đổi API dễ dàng .

Để kết nối với máy chủ phụ trợ thực sự:

Thiết lập biến môi trường:

NUXT_PUBLIC_USE_MOCK_API=false

Cấu hình URL cơ sở API của bạn:

NUXT_PUBLIC_API_BASE_URL=https://your-api-server.com

Hãy đảm bảo phản hồi từ máy chủ phụ trợ khớp với các kiểu dữ liệu được định nghĩa trong:

types/index.ts

Không cần thay đổi mã nguồn thêm.

Tùy chỉnh Blog

Các nhà phát triển có thể dễ dàng tùy chỉnh mẫu.

Thay đổi chủ đề hoặc kiểu dáng

Chỉnh sửa cấu hình Tailwind:

tailwind.config.ts

Các phong cách toàn cầu được tìm thấy ở:

assets/css/main.css

Chỉnh sửa nội dung blog

Nội dung giả lập có thể được cập nhật trong:

mocks/posts.ts 
mocks/categories.ts 
mocks/authors.ts

Điều này cho phép bạn nhanh chóng tạo mẫu thử nghiệm cho các bộ dữ liệu blog khác nhau.

Cập nhật cài đặt ứng dụng

Các hằng số ứng dụng như điều hướng, thương hiệu và liên kết mạng xã hội được lưu trữ trong:

utils/constants.ts

Tại sao nên sử dụng mẫu blog Nuxt này?

Dự án này là một lựa chọn tuyệt vời dành cho các nhà phát triển vì nó cung cấp:

Kiến trúc Nuxt 3 sạch sẽ
Cấu trúc mã ở cấp độ sản xuất
API giả lập dành cho phát triển giao diện người dùng
Giao diện người dùng hiện đại với Tailwind CSS
các trang sẵn sàng cho SEO
Dễ dàng tích hợp với các API thực tế.

Nó vừa có tác dụng như một dự án học tập, vừa là nền tảng cho một blog sẵn sàng hoạt động .

Kho lưu trữ GitHub

Bạn có thể xem toàn bộ mã nguồn tại đây: 👉 https://github.com/bfotool/nuxtjs-base-blog

Nếu bạn thấy dự án hữu ích, hãy cân nhắc đánh dấu sao cho kho lưu trữ và đóng góp cải tiến.