Template Blog Berbasis Nuxt 3 – Bfotool Nuxtjs Base Blog(Vue 3 + TypeScript + Tailwind)

Jika Anda mencari template blog Nuxt 3 modern, Bfotool Nuxtjs Base Blog adalah solusi yang sangat baik. Ini adalah aplikasi blog yang berfungsi penuh yang dibangun dengan Nuxt 3, Vue 3, TypeScript, dan Tailwind CSS, yang dirancang untuk membantu pengembang membangun blog profesional dengan cepat tanpa memerlukan backend selama pengembangan.

Proyek ini mencakup lapisan API palsu yang didukung oleh interceptor Axios, yang mensimulasikan API REST sungguhan. Hal ini menjadikannya sempurna untuk mempelajari arsitektur Nuxt, membuat prototipe aplikasi, atau membangun platform blog yang siap produksi.

Anda dapat menjelajahi repositori di sini: 👉 https://github.com/bfotool/nuxtjs-base-blog

Apa itu Bfotool Nuxtjs Base Blog?

Bfotool Nuxtjs Base Blog adalah template aplikasi blog modern yang dibangun menggunakan teknologi frontend terbaru. Template ini menyediakan antarmuka blogging lengkap dengan postingan, kategori, fungsi pencarian, dan halaman kontak.

Proyek ini dirancang dengan arsitektur Nuxt 3 yang bersih, sehingga mudah dipahami dan diperluas.

Poin-poin pentingnya meliputi:

UI blog lengkap dengan desain responsif.
API REST tiruan untuk pengembangan tanpa backend.
Dibangun dengan API Komposisi Vue 3 modern.
Pengembangan yang aman secara tipe dengan TypeScript
Konfigurasi meta yang siap SEO
Dukungan tema gelap dan terang

Repositori tersebut dapat ditemukan di sini:

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

Templat ini ideal untuk:

Blog pribadi
Blog perusahaan
Portofolio pengembang
Mempelajari arsitektur Nuxt 3
Pembuatan prototipe cepat untuk situs web konten.

Fitur Utama

C class="ac-h3"Halaman Blog Lengkap

Templat ini mencakup serangkaian halaman yang telah diimplementasikan sepenuhnya dan biasanya dibutuhkan dalam platform blog.

Halaman utama meliputi:

Halaman Utama – Menampilkan postingan unggulan, filter kategori, dan postingan yang dipaginasi.
Halaman Posting Blog – Tampilan artikel lengkap dengan daftar isi dan posting terkait
Halaman Kategori – Jelajahi postingan yang difilter berdasarkan kategori
Halaman Pencarian – Pencarian waktu nyata dengan fungsi debounce.
Halaman Tentang Kami – Perkenalkan tim, misi, atau merek Anda
Halaman Kontak – Formulir kontak dengan validasi dan notifikasi pop-up
Halaman Kesalahan – Antarmuka pengguna penanganan kesalahan khusus

Struktur ini menyediakan pengalaman blog yang siap digunakan bagi para pengguna.

< class="ac-h3"h3>Lapisan API Palsu untuk Pengembangan

Salah satu fitur paling ampuh dari proyek ini adalah sistem API tiruan(mock API) .

Alih-alih terhubung ke backend sungguhan, proyek ini mensimulasikan respons API menggunakan interceptor Axios .

Pendekatan ini memungkinkan pengembang untuk:

Membangun fitur frontend tanpa ketergantungan pada backend.
Uji paginasi, penyaringan, dan pengurutan
Simulasikan penundaan respons API yang sebenarnya
Anda dapat dengan mudah beralih ke backend sungguhan di kemudian hari.

API tiruan tersebut mencakup titik akhir seperti:

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

Karena API diabstraksikan melalui composable useApi, beralih ke backend sungguhan hanya memerlukan konfigurasi minimal.

Arsitektur Nuxt 3 Modern

Proyek ini mengikuti pola pengembangan Nuxt 3 yang direkomendasikan, menjadikannya referensi yang bagus bagi pengembang yang mempelajari kerangka kerja tersebut.

Fitur arsitektur penting meliputi:

Komponen dan komposisi yang diimpor secara otomatis
Pengembangan berbasis TypeScript
Lapisan layanan API yang dapat disusun
Struktur folder modular
Konfigurasi meta SEO
Transisi halaman

Aplikasi ini juga menggunakan:

useSeoMeta()untuk tag SEO
useColorMode()untuk pergantian tema
useRoute()dan komponen komposit bawaan Nuxt lainnya.

< class="ac-h3"h3>Mode Gelap dan Desain Responsif

UI mendukung tema gelap dan terang menggunakan @nuxtjs/color-mode.

Fitur-fiturnya meliputi:

Deteksi tema sistem otomatis
Pengalihan tema manual
Penataan gaya Tailwind CSS
Tata letak responsif yang mengutamakan perangkat seluler.

Hal ini memastikan blog berfungsi dengan lancar di berbagai platform:

Desktop
Tablet
Perangkat seluler

P class="ac-h3"Fitur Blog yang Canggih

Templat blog ini menyertakan beberapa fitur canggih yang biasanya ditemukan di platform blog produksi.

Ini termasuk:

Daftar isi yang dihasilkan dari judul markdown
Saran postingan terkait
Perkiraan waktu membaca
Penyaringan kategori
Pencarian teks lengkap yang dihilangkan efek pantulannya
Paginasi cerdas
Notifikasi pop-up
Memuat komponen kerangka
Transisi halaman animasi

Fitur-fitur ini menciptakan pengalaman membaca modern bagi pengunjung blog.

Tumpukan Teknologi

Proyek ini dibangun menggunakan tumpukan frontend modern.

Lapisan	Teknologi
Kerangka	Nuxt 3.15
Pustaka UI	Vue 3.5
Bahasa	TypeScript 5.7
Penataan gaya	Tailwind CSS 3.4
Manajemen Negara	Pinia
Klien HTTP	Axios
Ikon	Iconify melalui @nuxt/icon
Tema	@nuxtjs/mode warna
Serat	ESLint
Pemformatan	Lebih cantik

Tumpukan teknologi ini memberikan kinerja, skalabilitas, dan kemudahan pemeliharaan .

Gambaran Umum Struktur Proyek

Repositori ini mengikuti struktur yang rapi dan terorganisir.

Direktori penting meliputi:

Halaman

Direktori ini pagesmendefinisikan rute-rute utama:

index.vue– Beranda
about.vue– Halaman Tentang
contact.vue– Formulir kontak
search.vue– Antarmuka pencarian
blog/[slug].vue– Halaman posting blog
blog/category/[slug].vue– Halaman kategori

Komponen kelas="ac-h3"

Komponen UI yang dapat digunakan kembali dikelompokkan ke dalam kategori logis:

layout– Header dan footer
common– Penomoran halaman, loader kerangka, notifikasi pop-up
blog– Komponen khusus blog seperti kartu pos dan daftar isi

Kelas Comp="ac-h3"osables

Direktori composables berisi logika yang dapat digunakan kembali.

Elemen-elemen penting yang dapat dikomposisikan meliputi:

useApi()– Lapisan layanan API bertipe
useDebounce()– Menunda nilai reaktif

< class="ac-h3"h3>Lapisan API Tiruan

Sistem tiruan tersebut terletak di dalam mocksdirektori.

Isi di dalamnya meliputi:

handlers.ts– Interseptor permintaan API
posts.ts– Contoh postingan blog
authors.ts– Data penulis
categories.ts– Data kategori

Struktur ini membuat proyek mudah dimodifikasi dan diperluas .

Cara Menginstal dan Menjalankan Proyek

Ikuti langkah-langkah ini untuk menjalankan proyek secara lokal.

Prasyarat class="ac-h3"uisites

Anda membutuhkan:

Node.js 18.17 atau versi yang lebih baru
npm, yarn, atau pnpm

Kloning Repositori

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

class="ac-h3"Instal Dependensi

npm install

Mulai Server Pengembangan

npm run dev

Kemudian buka browser Anda di:

http://localhost:3000

Server pengembangan Nuxt akan secara otomatis memuat ulang saat file berubah.

Beralih dari API Tiruan ke API Nyata

Salah satu keputusan desain terbaik dalam proyek ini adalah peralihan API yang mudah .

Untuk menghubungkan backend sungguhan:

Atur variabel lingkungan:

NUXT_PUBLIC_USE_MOCK_API=false

Konfigurasikan URL dasar API Anda:

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

Pastikan respons backend Anda sesuai dengan tipe yang didefinisikan dalam:

types/index.ts

Tidak diperlukan perubahan kode tambahan.

Mengkustomisasi Blog

Pengembang dapat dengan mudah menyesuaikan templat tersebut.

Ubah Tema atau Gaya

Edit konfigurasi Tailwind:

tailwind.config.ts

Gaya global terdapat di:

assets/css/main.css

Ubah Konten Blog

Konten contoh dapat diperbarui di:

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

Ini memungkinkan Anda untuk dengan cepat membuat prototipe berbagai kumpulan data blog.

Perbarui Pengaturan Aplikasi

Konstanta aplikasi seperti navigasi, branding, dan tautan media sosial disimpan di:

utils/constants.ts

Mengapa Menggunakan Template Blog Nuxt Ini?

Proyek ini merupakan pilihan tepat bagi para pengembang karena menyediakan:

Arsitektur Nuxt 3 yang bersih
Struktur kode tingkat produksi
API tiruan untuk pengembangan frontend
UI Modern dengan Tailwind CSS
Halaman yang siap SEO
Integrasi mudah dengan API sungguhan

Ini berfungsi baik sebagai proyek pembelajaran maupun sebagai fondasi blog yang siap produksi .

Repositori GitHub

Anda dapat menjelajahi kode sumber lengkapnya di sini: 👉 https://github.com/bfotool/nuxtjs-base-blog

Jika Anda merasa proyek ini bermanfaat, pertimbangkan untuk memberi bintang pada repositori dan memberikan kontribusi berupa perbaikan.