close

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

Wenn Sie nach einer modernen Blog-Vorlage für Nuxt 3 suchen, ist der Bfotool Nuxtjs Base Blog eine hervorragende Lösung. Es handelt sich um eine voll funktionsfähige Blog-Anwendung, die mit Nuxt 3, Vue 3, TypeScript und Tailwind CSS entwickelt wurde und Entwicklern hilft, schnell einen professionellen Blog zu erstellen, ohne während der Entwicklung ein Backend zu benötigen.

Das Projekt beinhaltet eine simulierte API-Schicht, die auf Axios-Interceptors basiert und eine echte REST-API nachbildet. Dadurch eignet es sich hervorragend zum Erlernen der Nuxt-Architektur, zum Prototyping von Anwendungen oder zum Aufbau produktionsreifer Blog-Plattformen.

Hier kannst du das Repository erkunden: 👉 https://github.com/bfotool/nuxtjs-base-blog

Was ist der Bfotool Nuxtjs Base Blog?

Bfotool Nuxtjs Base Blog ist eine moderne Blog-Anwendungsvorlage, die mit den neuesten Frontend-Technologien entwickelt wurde. Sie bietet eine vollständige Blog-Oberfläche mit Beiträgen, Kategorien, Suchfunktion und Kontaktseiten.

Das Projekt ist mit einer übersichtlichen Nuxt 3-Architektur konzipiert, wodurch es leicht verständlich und erweiterbar ist.

Zu den wichtigsten Highlights gehören:

  • Vollständige Blog-Benutzeroberfläche mit responsivem Design

  • Mock-REST-API für die Entwicklung ohne Backend

  • Erstellt mit der modernen Vue 3 Composition API.

  • Typsichere Entwicklung mit TypeScript

  • SEO-fähige Meta-Konfiguration

  • Unterstützung für dunkle und helle Designs

Das Repository finden Sie hier:

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

Diese Vorlage eignet sich ideal für:

  • Persönliche Blogs

  • Firmenblogs

  • Entwicklerportfolios

  • Die Nuxt 3-Architektur kennenlernen

  • Schnelles Prototyping von Inhaltswebseiten

Hauptmerkmale

C class="ac-h3"vollständige Blogseiten

Die Vorlage enthält einen vollständig implementierten Satz von Seiten, die typischerweise auf einer Blog-Plattform benötigt werden.

Die Hauptseiten umfassen:

  • Startseite – Zeigt einen hervorgehobenen Hauptbeitrag, Kategoriefilter und paginierte Beiträge an.

  • Blogbeitragsseite – Vollständige Artikelansicht mit Inhaltsverzeichnis und verwandten Beiträgen

  • Kategorieseite – Beiträge nach Kategorie durchsuchen

  • Suchseite – Echtzeitsuche mit Entprellfunktion

  • Über uns-Seite – Stellen Sie Ihr Team, Ihre Mission oder Ihre Marke vor.

  • Kontaktseite – Kontaktformular mit Validierung und Feedback-Funktion

  • Fehlerseite – Benutzerdefinierte Benutzeroberfläche zur Fehlerbehandlung

Diese Struktur bietet Nutzern ein sofort einsatzbereites Blog-Erlebnis .

< class="ac-h3"h3>Fake-API-Schicht für die Entwicklung

Eine der leistungsstärksten Funktionen dieses Projekts ist das Mock-API-System .

Anstatt eine Verbindung zu einem realen Backend herzustellen, simuliert das Projekt API-Antworten mithilfe von Axios-Interceptors .

Dieser Ansatz ermöglicht es Entwicklern:

  • Frontend-Funktionen ohne Backend-Abhängigkeiten erstellen

  • Testen von Paginierung, Filterung und Sortierung

  • Reale API-Antwortverzögerungen simulieren

  • Wechseln Sie später ganz einfach zu einem echten Backend.

Die simulierte API umfasst Endpunkte wie beispielsweise:

  • /posts

  • /posts/featured

  • /posts/:slug

  • /categories

  • /authors

  • /contact

Da die API durch die useApi-Composable abstrahiert wird, ist für den Wechsel zu einem echten Backend nur eine minimale Konfiguration erforderlich.

Moderne Nuxt 3 Architektur

Das Projekt orientiert sich an den empfohlenen Nuxt 3-Entwicklungsmustern und ist daher eine hervorragende Referenz für Entwickler, die das Framework erlernen möchten.

Zu den wichtigsten architektonischen Merkmalen gehören:

  • Automatisch importierte Komponenten und Kompositionselemente

  • TypeScript-basierte Entwicklung

  • Zusammensetzbare API-Dienstschicht

  • Modulare Ordnerstruktur

  • SEO-Meta-Konfiguration

  • Seitenübergänge

Die Anwendung verwendet außerdem:

  • useSeoMeta()für SEO-Tags

  • useColorMode()zum Umschalten des Designs

  • useRoute()und andere integrierte Nuxt-Kompositionsobjekte

Dunkelmodus und responsives Design

Die Benutzeroberfläche unterstützt dunkle und helle Designs mittels @nuxtjs/color-mode.

Zu den Merkmalen gehören:

  • Automatische Systemthemenerkennung

  • Manuelle Themenumschaltung

  • Tailwind CSS-Styling

  • Mobile-First-Responsive-Layout

Dadurch wird sichergestellt, dass der Blog reibungslos auf folgenden Plattformen funktioniert:

  • Desktop

  • Tabletten

  • Mobilgeräte

P class="ac-h3"powerful Blog Features

Die Blogvorlage enthält mehrere erweiterte Funktionen, die typischerweise in produktiven Blog-Plattformen zu finden sind.

Dazu gehören:

  • Inhaltsverzeichnis, generiert aus Markdown-Überschriften

  • Vorschläge für ähnliche Beiträge

  • Geschätzte Lesezeit

  • Kategorienfilterung

  • Entprellte Volltextsuche

  • Intelligente Seitennummerierung

  • Toast-Benachrichtigungen

  • Laden der Skelettkomponenten

  • Animierte Seitenübergänge

Diese Funktionen schaffen ein modernes Leseerlebnis für Blogbesucher.

Technologie-Stack

Das Projekt wurde mit einem modernen Frontend-Stack realisiert.

Schicht Technologie
Rahmen Nuxt 3.15
UI-Bibliothek Vue 3.5
Sprache TypeScript 5.7
Styling Tailwind CSS 3.4
Staatsmanagement Pinia
HTTP-Client Axios
Symbole Iconify via @nuxt/icon
Thema @nuxtjs/color-mode
Linting ESLint
Formatierung Hübscher

Dieser Stack bietet Leistung, Skalierbarkeit und Wartbarkeit .

Projektstrukturübersicht

Das Repository weist eine saubere und übersichtliche Struktur auf.

Wichtige Verzeichnisse sind unter anderem:

Seiten

Das pagesVerzeichnis definiert die Hauptrouten:

  • index.vue– Startseite

  • about.vue– Über uns-Seite

  • contact.vue– Kontaktformular

  • search.vue– Suchschnittstelle

  • blog/[slug].vue– Blogbeitragsseite

  • blog/category/[slug].vue– Kategorieseite

Com class="ac-h3"ponents

Wiederverwendbare UI-Komponenten sind in logische Kategorien gruppiert:

  • layout– Kopf- und Fußzeile

  • common– Seitennummerierung, Skelett-Ladebildschirme, Toast-Benachrichtigungen

  • blog– Blogspezifische Elemente wie Postkarten und Inhaltsverzeichnis

Comp class="ac-h3"osables

Das Verzeichnis „composables“ enthält wiederverwendbare Logik.

Wichtige Kompositionsmittel sind:

  • useApi()– Typisierte API-Dienstschicht

  • useDebounce()– Entprellwerte

< class="ac-h3"h3>Mock API Layer

Das Mock-System befindet sich im mocksVerzeichnis.

Es enthält:

  • handlers.ts– API-Anfrage-Interzeptoren

  • posts.ts– Beispiel-Blogbeiträge

  • authors.ts– Autorendaten

  • categories.ts– Kategoriedaten

Diese Struktur ermöglicht es, das Projekt leicht zu modifizieren und zu erweitern .

So installieren und starten Sie das Projekt

Führen Sie diese Schritte aus, um das Projekt lokal auszuführen.

Voraussetzungsklasse="ac-h3"uisites

Sie benötigen:

  • Node.js 18.17 oder höher

  • npm, yarn oder pnpm

Repository klonen

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

class="ac-h3"Abhängigkeiten installieren

npm install

Entwicklungsserver starten

npm run dev

Öffnen Sie anschließend Ihren Browser unter:

http://localhost:3000

Der Nuxt-Entwicklungsserver wird automatisch neu geladen, wenn sich Dateien ändern.

Umstellung von einer simulierten API auf eine echte API

Eine der besten Designentscheidungen in diesem Projekt ist der einfache API-Wechsel .

Um ein echtes Backend anzuschließen:

  1. Die Umgebungsvariable festlegen:

NUXT_PUBLIC_USE_MOCK_API=false

  1. Konfigurieren Sie Ihre API-Basis-URL:

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

  1. Stellen Sie sicher, dass Ihre Backend-Antwort den in folgendem Abschnitt definierten Typen entspricht:

types/index.ts

Es sind keine weiteren Codeänderungen erforderlich.

Den Blog anpassen

Entwickler können die Vorlage problemlos anpassen.

Design oder Stile ändern

Bearbeiten Sie die Tailwind-Konfiguration:

tailwind.config.ts

Globale Stile befinden sich in:

assets/css/main.css

Blog-Inhalte bearbeiten

Beispielinhalte können aktualisiert werden in:

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

Dies ermöglicht es Ihnen, schnell Prototypen verschiedener Blog-Datensätze zu erstellen.

App-Einstellungen aktualisieren

Anwendungskonstanten wie Navigation, Branding und Social-Media-Links werden gespeichert in:

utils/constants.ts

Warum diese Nuxt-Blogvorlage verwenden?

Dieses Projekt ist eine hervorragende Wahl für Entwickler, da es Folgendes bietet:

  • Saubere Nuxt 3-Architektur

  • Codestruktur auf Produktionsebene

  • Mock-API für die Frontend-Entwicklung

  • Moderne Benutzeroberfläche mit Tailwind CSS

  • SEO-optimierte Seiten

  • Einfache Integration mit realen APIs

Es eignet sich sowohl als Lernprojekt als auch als Grundlage für einen produktionsreifen Blog .

GitHub-Repository

Den vollständigen Quellcode finden Sie hier: 👉 https://github.com/bfotool/nuxtjs-base-blog

Wenn Sie das Projekt nützlich finden, erwägen Sie, das Repository mit einem Stern zu versehen und Verbesserungen beizutragen.