Základní šablona blogu Nuxt 3 – Bfotool Základní blog Nuxtjs(Vue 3 + TypeScript + Tailwind)

Pokud hledáte moderní šablonu pro blogování s Nuxt 3, je Bfotool Nuxtjs Base Blog vynikajícím řešením. Jedná se o plně funkční blogovací aplikaci vytvořenou s využitím Nuxt 3, Vue 3, TypeScriptu a Tailwind CSS, která je navržena tak, aby vývojářům pomohla rychle vytvořit profesionální blog bez nutnosti backendu během vývoje.

Projekt obsahuje falešnou vrstvu API poháněnou interceptory Axios, která simuluje skutečné REST API. Díky tomu je ideální pro učení architektury Nuxt, prototypování aplikací nebo budování blogových platforem připravených pro produkční prostředí.

Repozitář si můžete prohlédnout zde: 👉 https://github.com/bfotool/nuxtjs-base-blog

Co je základní blog Bfotool Nuxtjs?

Bfotool Nuxtjs Base Blog je moderní šablona blogovací aplikace vytvořená s využitím nejnovějších frontendových technologií. Poskytuje kompletní blogovací rozhraní s příspěvky, kategoriemi, vyhledávací funkcí a stránkami s kontakty.

Projekt je navržen s čistou architekturou Nuxt 3, což usnadňuje jeho pochopení a rozšíření.

Mezi klíčové body patří:

Plné uživatelské rozhraní blogu s responzivním designem
Simulace REST API pro vývoj bez backendu
Vytvořeno s moderním Vue 3 Composition API
Typově bezpečný vývoj s TypeScriptem
Konfigurace metadat připravená pro SEO
Podpora tmavých a světlých motivů

Úložiště naleznete zde:

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

Tato šablona je ideální pro:

Osobní blogy
Firemní blogy
Portfolia vývojářů
Učení se architektuře Nuxt 3
Rychlé prototypování webových stránek s obsahem

Klíčové vlastnosti

Kompletní stránky blogu v C class="ac-h3"

Šablona obsahuje plně implementovanou sadu stránek, které jsou obvykle vyžadovány na blogové platformě.

Hlavní stránky zahrnují:

Domovská stránka – Zobrazuje hlavní příspěvek, filtry kategorií a stránkované příspěvky
Stránka blogového příspěvku – zobrazení celého článku s obsahem a souvisejícími příspěvky
Stránka kategorií – Procházejte příspěvky filtrované podle kategorie
Vyhledávací stránka – Vyhledávání v reálném čase s funkcí potlačení odskoků
Stránka O nás – Představte svůj tým, poslání nebo značku
Kontaktní stránka – Kontaktní formulář s ověřením a zpětnou vazbou
Chybová stránka – Vlastní uživatelské rozhraní pro zpracování chyb

Tato struktura poskytuje uživatelům blogový zážitek připravený k použití .

< class="ac-h3"h3>Falešná vrstva API pro vývoj

Jednou z nejsilnějších funkcí tohoto projektu je systém simulovaných API .

Místo připojení ke skutečnému backendu projekt simuluje odpovědi API pomocí interceptorů Axios .

Tento přístup umožňuje vývojářům:

Vytvářejte frontendové funkce bez závislostí na backendu
Testování stránkování, filtrování a řazení
Simulujte skutečné zpoždění odezvy API
Snadno přepněte na skutečný backend později

Simulované API obsahuje koncové body, jako například:

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

Protože je API abstrahováno prostřednictvím komponovatelného prvku useApi, vyžaduje přechod na skutečný backend minimální konfiguraci.

Moderní architektura Nuxt 3

Projekt se řídí doporučenými vývojovými vzory Nuxt 3, což z něj činí skvělou referenci pro vývojáře, kteří se s tímto frameworkem seznamují.

Mezi důležité architektonické prvky patří:

Automaticky importované komponenty a kompozovatelné prvky
Vývoj zaměřený na TypeScript
Vrstva kompozibilní služby API
Modulární struktura složek
Konfigurace metadat SEO
Přechody stránek

Aplikace také používá:

useSeoMeta()pro SEO tagy
useColorMode()pro přepínání témat
useRoute()a další vestavěné kompozovatelné prvky Nuxt

< class="ac-h3"h3>Tmavý režim a responzivní design

Uživatelské rozhraní podporuje tmavá i světlá témata pomocí @nuxtjs/color-mode.

Mezi funkce patří:

Automatická detekce systémového motivu
Ruční přepínání motivů
CSS styly Tailwind
Responzivní rozvržení pro mobilní zařízení

Díky tomu blog bezproblémově funguje napříč:

Počítač
Tablety
Mobilní zařízení

Funkce blogu P class="ac-h3" Krásné

Šablona blogu obsahuje několik pokročilých funkcí, které se obvykle nacházejí v produkčních blogovacích platformách.

Patří mezi ně:

Obsah generovaný z nadpisů Markdownu
Návrhy souvisejících příspěvků
Odhadovaná doba čtení
Filtrování kategorií
Vyhledávání v plném textu bez odskoku
Inteligentní stránkování
Oznámení v podobě informačních brožur
Načítání komponent kostry
Animované přechody mezi stránkami

Tyto funkce vytvářejí pro návštěvníky blogu moderní čtenářský zážitek .

Technologický zásobník

Projekt je postaven s využitím moderního frontendového stacku.

Vrstva	Technologie
Rámec	Nuxt 3.15
Knihovna uživatelského rozhraní	Vue 3.5
Jazyk	TypeScript 5.7
Styling	Tailwind CSS 3.4
Správa státu	Pinia
HTTP klient	Axios
Ikony	Ikonifikace přes @nuxt/icon
Téma	@nuxtjs/barevný-režim
Linting	ESLint
Formátování	Hezčí

Tento stack poskytuje výkon, škálovatelnost a udržovatelnost .

Přehled struktury projektu

Repozitář má čistou a organizovanou strukturu.

Mezi důležité adresáře patří:

Stránky

Adresář pagesdefinuje hlavní trasy:

index.vue– Domovská stránka
about.vue– Stránka O nás
contact.vue– Kontaktní formulář
search.vue– Vyhledávací rozhraní
blog/[slug].vue– Stránka s příspěvkem na blogu
blog/category/[slug].vue– Stránka kategorie

Komponenty Com class="ac-h3"

Opakovaně použitelné komponenty uživatelského rozhraní jsou seskupeny do logických kategorií:

layout– Záhlaví a zápatí
common– Stránkování, skeletové zavaděče, upozornění na toast
blog– Komponenty specifické pro blog, jako jsou pohlednice a obsah

Comp class="ac-h3"osables

Adresář composables obsahuje logiku pro opakované použití.

Mezi důležité skládací materiály patří:

useApi()– Vrstva typovaných služeb API
useDebounce()– Odrušení reaktivních hodnot

< class="ac-h3"h3>Vrstva simulovaného API

Simulovaný systém se nachází uvnitř mocksadresáře.

Obsahuje:

handlers.ts– Zachytávače požadavků API
posts.ts– Ukázkové příspěvky na blogu
authors.ts– Údaje o autorovi
categories.ts– Údaje o kategorii

Tato struktura usnadňuje úpravy a rozšíření projektu .

Jak nainstalovat a spustit projekt

Chcete-li spustit projekt lokálně, postupujte podle těchto kroků.

Předpoklady class="ac-h3"uisites

Potřebujete:

Node.js 18.17 nebo novější
npm, příze nebo pnpm

Klonování repozitáře

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

class="ac-h3"Instalační závislosti

npm install

Spustit vývojový server

npm run dev

Pak otevřete prohlížeč na adrese:

http://localhost:3000

Vývojový server Nuxt se automaticky znovu načte, když se soubory změní.

Přechod z Mock API na Real API

Jedním z nejlepších designových rozhodnutí v tomto projektu je snadné přepínání mezi API .

Pro připojení skutečného backendu:

Nastavte proměnnou prostředí:

NUXT_PUBLIC_USE_MOCK_API=false

Nakonfigurujte základní URL adresu API:

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

Ujistěte se, že vaše odpověď backendu odpovídá typům definovaným v:

types/index.ts

Nejsou vyžadovány žádné další změny kódu.

Přizpůsobení blogu

Vývojáři si mohou šablonu snadno přizpůsobit.

Změna motivu nebo stylů

Upravte konfiguraci Tailwindu:

tailwind.config.ts

Globální styly se nacházejí v:

assets/css/main.css

Úprava obsahu blogu

Obsah simulace lze aktualizovat v:

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

To vám umožňuje rychle vytvářet prototypy různých datových sad blogů.

Aktualizovat nastavení aplikace

Aplikační konstanty, jako je navigace, branding a odkazy na sociální sítě, jsou uloženy v:

utils/constants.ts

Proč používat tuto šablonu blogu Nuxt?

Tento projekt je skvělou volbou pro vývojáře, protože nabízí:

Čistá architektura Nuxt 3
Struktura kódu na produkční úrovni
Mock API pro vývoj frontendu
Moderní uživatelské rozhraní s Tailwind CSS
stránky připravené pro vyhledávače(SEO)
Snadná integrace se skutečnými API

Funguje jak jako vzdělávací projekt, tak i jako základ blogu připravený k produkci .

Repozitář GitHubu

Celý zdrojový kód si můžete prohlédnout zde: 👉 https://github.com/bfotool/nuxtjs-base-blog

Pokud shledáte projekt užitečným, zvažte označení repozitáře hvězdičkou a přispění k jeho vylepšení.