Cithakan Blog Basis Nuxt 3 – Bfotool Blog Basis Nuxtjs(Vue 3 + TypeScript + Tailwind)

Yen sampeyan nggoleki cithakan pambuka blog Nuxt 3 modern, Bfotool Nuxtjs Base Blog minangka solusi sing apik banget. Iki minangka aplikasi blog sing fungsional kanthi lengkap sing dibangun nganggo Nuxt 3, Vue 3, TypeScript, lan Tailwind CSS, sing dirancang kanggo mbantu para pangembang kanthi cepet mbangun blog profesional tanpa butuh backend sajrone pangembangan.

Proyèk iki kalebu lapisan API palsu sing didhukung déning interceptor Axios, sing nyimulasikaké REST API sing nyata. Iki ndadèkaké sampurna kanggo sinau arsitektur Nuxt, prototipe aplikasi, utawa mbangun platform blog sing siap produksi.

Sampeyan bisa njelajah gudang ing kene: 👉 https://github.com/bfotool/nuxtjs-base-blog

Apa kuwi Blog Basis Bfotool Nuxtjs?

Blog Dasar Bfotool Nuxtjs kuwi cithakan aplikasi blog modern sing digawe nganggo teknologi frontend paling anyar. Iki nyedhiyakake antarmuka blog lengkap kanthi postingan, kategori, fungsi telusuran, lan kaca kontak.

Proyèk iki dirancang nganggo arsitektur Nuxt 3 sing resik, saéngga gampang dingerteni lan dikembangake.

Sorotan utama kalebu:

UI blog lengkap kanthi desain responsif
API REST tiruan kanggo pangembangan tanpa backend
Dibangun nganggo API Komposisi Vue 3 modern
Pangembangan sing aman nganggo TypeScript
Konfigurasi meta sing siap SEO
Dhukungan tema peteng lan padhang

Gudange bisa ditemokake ing kene:

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

Cithakan iki cocog kanggo:

Blog pribadi
Blog perusahaan
Portofolio pangembang
Sinau arsitektur Nuxt 3
Prototipe cepet situs web konten

Fitur Utama

Kaca Blog C class="ac-h3" lengkap

Cithakan iki kalebu sakumpulan kaca sing wis diimplementasikake kanthi lengkap sing biasane dibutuhake ing platform blog.

Kaca-kaca utama kalebu:

Kaca Ngarep – Nampilake kiriman pahlawan unggulan, filter kategori, lan kiriman sing di-pagenasi
Kaca Posting Blog – Tampilan artikel lengkap karo daftar isi lan postingan sing gegandhengan
Kaca Kategori – Telusuri kiriman sing difilter miturut kategori
Kaca Telusuran – Telusuran wektu nyata nganggo fungsi debounce
Babagan Kaca – Perkenalkan tim, misi, utawa merek sampeyan
Kaca Kontak – Formulir kontak nganggo validasi lan umpan balik
Kaca Kasalahan – UI penanganan kesalahan khusus

Struktur iki nyedhiyakake pengalaman blog sing siap digunakake kanggo para pangguna.

Lapisan API Palsu kanggo Pangembangan

Salah sawijining fitur paling kuat saka proyèk iki yaiku sistem mock API .

Tinimbang nyambung menyang backend nyata, proyèk iki nyimulasikaké respon API nggunakaké interceptor Axios .

Pendekatan iki ngidini para pangembang kanggo:

Nggawe fitur frontend tanpa dependensi backend
Tes paginasi, panyaringan, lan pangurutan
Simulasi wektu tundha respon API sing nyata
Gampang ngalih menyang backend nyata mengko

API tiruan kalebu titik pungkasan kayata:

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

Amarga API diabstraksi liwat useApi composable, ngalih menyang backend nyata mbutuhake konfigurasi minimal.

Arsitektur Nuxt 3 Modern

Proyèk iki nderek pola pangembangan Nuxt 3 sing disaranake, dadi referensi sing apik kanggo para pangembang sing sinau babagan framework kasebut.

Fitur arsitektur penting kalebu:

Komponen lan komposit sing diimpor otomatis
Pangembangan TypeScript-first
Lapisan layanan API sing bisa dikompos
Struktur folder modular
Konfigurasi meta SEO
Transisi kaca

Aplikasi iki uga nggunakake:

useSeoMeta()kanggo tag SEO
useColorMode()kanggo ganti tema
useRoute()lan komposable Nuxt bawaan liyane

Mode Peteng lan Desain Responsif

UI ndhukung tema peteng lan padhang nggunakake @nuxtjs/color-mode.

Fitur-fitur kasebut kalebu:

Deteksi tema sistem otomatis
Ngalih tema manual
Gaya CSS Tailwind
Tata letak responsif seluler-first

Iki njamin blog bisa digunakake kanthi lancar ing:

Desktop
Tablet
Piranti seluler

Fitur Blog sing apik banget kelas P = "ac-h3"

Cithakan blog iki kalebu sawetara fitur canggih sing biasane ditemokake ing platform blog produksi.

Iki kalebu:

Daftar isi sing digawe saka judhul markdown
Saran kiriman sing gegandhengan
Perkiraan wektu maca
Penyaringan kategori
Panelusuran teks lengkap sing ora dibatalake
Paginasi cerdas
Notifikasi roti panggang
Ngunggah komponen kerangka
Transisi kaca animasi

Fitur-fitur iki nggawe pengalaman maca modern kanggo para pengunjung blog.

Tumpukan Teknologi

Proyèk iki dibangun nganggo tumpukan frontend modern.

Lapisan	Teknologi
Kerangka	Nuxt 3.15
Perpustakaan UI	Vue 3.5
Basa	TypeScript 5.7
Gaya	CSS Tailwind 3.4
Manajemen Negara	Pinia
Klien HTTP	Aksios
Ikon	Ikonikasi liwat @nuxt/icon
Tema	@nuxtjs/mode-werna
Linting	ESLint
Formatting	Luwih ayu

Tumpukan iki nyedhiyakake kinerja, skalabilitas, lan perawatan .

Ringkesan Struktur Proyek

Gudang kasebut nduweni struktur sing resik lan teratur.

Direktori penting kalebu:

Kaca-kaca

Direktori kasebut pagesnemtokake rute utama:

index.vue– Kaca Ngarep
about.vue– Kaca babagan
contact.vue– Formulir kontak
search.vue– Antarmuka telusuran
blog/[slug].vue– Kaca postingan blog
blog/category/[slug].vue– Kaca kategori

Kom kelas="ac-h3"komponen

Komponen UI sing bisa digunakake maneh dikelompokake menyang kategori logis:

layout- Judhul lan sikil
common- Paginasi, pemuat kerangka, notifikasi toast
blog– Komponen khusus blog kaya kartu pos lan daftar isi

Kelas komp="ac-h3" bisa digunakake

Direktori composables ngemot logika sing bisa digunakake maneh.

Komposable penting kalebu:

useApi()– Lapisan layanan API sing diketik
useDebounce()- Ngilangake nilai reaktif

Lapisan API Tiruan

Sistem tiruan dumunung ing njero mocksdirektori.

Isine:

handlers.ts– Pencegat panjalukan API
posts.ts- Tuladha postingan blog
authors.ts– Data pangripta
categories.ts– Data kategori

Struktur iki nggampangake proyèk iki kanggo diowahi lan ditambahi .

Cara Nginstal lan Mlaku Proyek

Tindakake langkah-langkah iki kanggo mbukak proyek kasebut sacara lokal.

Prasyarat class="ac-h3"uisites

Sampeyan butuh:

Node.js 18.17 utawa luwih anyar
npm, benang, utawa pnpm

Kloning Repositori

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

class="ac-h3"Katergantungan Instalasi

npm install

Miwiti Server Pangembangan

npm run dev

Banjur bukak browser sampeyan ing:

http://localhost:3000

Server pangembangan Nuxt bakal dimuat ulang kanthi otomatis nalika file diganti.

Ngalih saka Mock API menyang Real API

Salah sawijining keputusan desain paling apik ing proyèk iki yaiku saklar API sing gampang .

Kanggo nyambungake backend nyata:

Setel variabel lingkungan:

NUXT_PUBLIC_USE_MOCK_API=false

Konfigurasi URL dhasar API sampeyan:

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

Priksa manawa respon backend sampeyan cocog karo jinis sing ditemtokake ing:

types/index.ts

Ora perlu owah-owahan kode tambahan.

Ngatur Blog

Para pangembang bisa kanthi gampang ngatur cithakan kasebut.

Ganti Tema utawa Gaya

Sunting konfigurasi Tailwind:

tailwind.config.ts

Gaya global dumunung ing:

assets/css/main.css

Owahi Isi Blog

Konten tiruan bisa dianyari ing:

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

Iki ngidini sampeyan nggawe prototipe set data blog sing beda-beda kanthi cepet.

Nganyari Setelan Aplikasi

Konstanta aplikasi kaya ta navigasi, branding, lan pranala sosial disimpen ing:

utils/constants.ts

Apa sebabé kudu nggunakaké cithakan Blog Nuxt iki?

Proyèk iki minangka pilihan sing apik kanggo para pangembang amarga nyedhiyakake:

Arsitektur Nuxt 3 sing resik
Struktur kode tingkat produksi
API tiruan kanggo pangembangan frontend
UI Modern nganggo CSS Tailwind
Kaca-kaca sing wis siyap kanggo SEO
Integrasi sing gampang karo API nyata

Iki bisa digunakake minangka proyèk pembelajaran lan uga minangka pondasi blog sing siap produksi .

Repositori GitHub

Sampeyan bisa njelajah kode sumber lengkap ing kene: 👉 https://github.com/bfotool/nuxtjs-base-blog

Yen sampeyan nganggep proyèk iki migunani, cobanen mènèhi lintang ing repositori lan nyumbang perbaikan.