close

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

Hvis du leder efter en moderne Nuxt 3 blogstarterskabelon, er Bfotool Nuxtjs Base Blog en fremragende løsning. Det er en fuldt funktionel blogapplikation bygget med Nuxt 3, Vue 3, TypeScript og Tailwind CSS, designet til at hjælpe udviklere med hurtigt at opbygge en professionel blog uden behov for en backend under udviklingen.

Projektet inkluderer et falsk API-lag drevet af Axios-interceptorer, som simulerer et rigtigt REST API. Dette gør det perfekt til at lære Nuxt-arkitektur, prototype applikationer eller bygge produktionsklare blogplatforme.

Du kan udforske arkivet her: 👉 https://github.com/bfotool/nuxtjs-base-blog

Hvad er Bfotool Nuxtjs Base Blog?

Bfotool Nuxtjs Base Blog er en moderne blogapplikationsskabelon bygget med de nyeste frontend-teknologier. Den tilbyder en komplet bloggrænseflade med indlæg, kategorier, søgefunktionalitet og kontaktsider.

Projektet er designet med en ren Nuxt 3-arkitektur, hvilket gør det nemt at forstå og udvide.

Vigtige højdepunkter inkluderer:

  • Fuld blog-brugergrænseflade med responsivt design

  • Mock REST API til udvikling uden backend

  • Bygget med moderne Vue 3 Composition API

  • Typesikker udvikling med TypeScript

  • SEO-klar metakonfiguration

  • Understøttelse af mørke og lyse temaer

Lageret kan findes her:

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

Denne skabelon er ideel til:

  • Personlige blogs

  • Virksomhedsblogs

  • Udviklerporteføljer

  • Læring af Nuxt 3-arkitektur

  • Hurtig prototyping af indholdswebsteder

Nøglefunktioner

C class="ac-h3"komplette blogsider

Skabelonen indeholder et fuldt implementeret sæt sider, der typisk kræves på en blogplatform.

Hovedsiderne inkluderer:

  • Hjemmeside – Viser et fremhævet hovedindlæg, kategorifiltre og paginerede indlæg

  • Blogindlægsside – Fuld artikelvisning med indholdsfortegnelse og relaterede indlæg

  • Kategoriside – Gennemse indlæg filtreret efter kategori

  • Søgeside – Søgning i realtid med debounce-funktionalitet

  • Om siden – Introducer dit team, din mission eller dit brand

  • Kontaktside – Kontaktformular med validering og toast-feedback

  • Fejlside – Brugerdefineret brugergrænseflade til fejlhåndtering

Denne struktur giver brugerne en brugervenlig blogoplevelse .

< class="ac-h3"h3>Falsk API-lag til udvikling

En af de mest kraftfulde funktioner i dette projekt er det simulerede API-system .

I stedet for at oprette forbindelse til en rigtig backend, simulerer projektet API-svar ved hjælp af Axios-interceptorer .

Denne tilgang giver udviklere mulighed for at:

  • Byg frontend-funktioner uden backend-afhængigheder

  • Test af paginering, filtrering og sortering

  • Simuler reelle API-svarforsinkelser

  • Skift nemt til en rigtig backend senere

Mock API'en inkluderer endpoints såsom:

  • /posts

  • /posts/featured

  • /posts/:slug

  • /categories

  • /authors

  • /contact

Fordi API'en er abstraheret gennem useApi composable, kræver skift til en rigtig backend minimal konfiguration.

Moderne Nuxt 3-arkitektur

Projektet følger anbefalede Nuxt 3-udviklingsmønstre, hvilket gør det til en god reference for udviklere, der lærer frameworket at kende.

Vigtige arkitektoniske træk omfatter:

  • Automatisk importerede komponenter og sammensætninger

  • TypeScript-første udvikling

  • Komponérbart API-servicelag

  • Modulær mappestruktur

  • SEO-metakonfiguration

  • Sideovergange

Applikationen bruger også:

  • useSeoMeta()til SEO-tags

  • useColorMode()til temaskift

  • useRoute()og andre indbyggede Nuxt-kompositelementer

Mørk tilstand og responsivt design

Brugergrænsefladen understøtter mørke og lyse temaer ved hjælp af @nuxtjs/color-mode.

Funktioner inkluderer:

  • Automatisk systemtemaregistrering

  • Manuel tema-skift

  • Tailwind CSS-styling

  • Mobilorienteret responsivt layout

Dette sikrer, at bloggen fungerer problemfrit på tværs af:

  • Skrivebord

  • Tabletter

  • Mobile enheder

P class="ac-h3"kraftfulde blogfunktioner

Blogskabelonen indeholder adskillige avancerede funktioner, der typisk findes i produktionsblogplatforme.

Disse omfatter:

  • Indholdsfortegnelse genereret fra overskrifter med nedsat pris

  • Forslag til relaterede indlæg

  • Estimeret læsetid

  • Kategorifiltrering

  • Afvist fuldtekstsøgning

  • Smart paginering

  • Toast-notifikationer

  • Indlæsning af skeletkomponenter

  • Animerede sideovergange

Disse funktioner skaber en moderne læseoplevelse for blogbesøgende.

Teknologistak

Projektet er bygget ved hjælp af en moderne frontend-stak.

Lag Teknologi
Ramme Nuxt 3.15
UI-bibliotek Vue 3.5
Sprog TypeScript 5.7
Styling Tailwind CSS 3.4
Statsforvaltning Pinia
HTTP-klient Axios
Ikoner Ikonificér via @nuxt/icon
Tema @nuxtjs/farvetilstand
Fnug ESLint
Formatering Smukkere

Denne stak giver ydeevne, skalerbarhed og vedligeholdelsesvenlighed .

Oversigt over projektstruktur

Arkivet følger en ren og organiseret struktur.

Vigtige mapper inkluderer:

Sider

Kataloget pagesdefinerer hovedruterne:

  • index.vue– Hjemmeside

  • about.vue– Om siden

  • contact.vue– Kontaktformular

  • search.vue– Søgegrænseflade

  • blog/[slug].vue– Blogindlægsside

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

Com class="ac-h3"komponenter

Genanvendelige brugergrænsefladekomponenter er grupperet i logiske kategorier:

  • layout– Sidehoved og sidefod

  • common– Paginering, skeletindlæsere, toast-notifikationer

  • blog– Blogspecifikke komponenter som postkort og indholdsfortegnelse

Comp class="ac-h3"osables

Mappen composables indeholder genanvendelig logik.

Vigtige kompositioner inkluderer:

  • useApi()– Typet API-servicelag

  • useDebounce()– Debounce reaktive værdier

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

Mock-systemet er placeret inde i mocksmappen.

Den indeholder:

  • handlers.ts– API-anmodningsinterceptorer

  • posts.ts– Eksempler på blogindlæg

  • authors.ts– Forfatterdata

  • categories.ts– Kategoridata

Denne struktur gør det nemt at ændre og udvide projektet .

Sådan installeres og køres projektet

Følg disse trin for at køre projektet lokalt.

Forudsætning class="ac-h3"besøger

Du har brug for:

  • Node.js 18.17 eller nyere

  • npm, garn eller pnpm

Klon arkivet

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

class="ac-h3"Installationsafhængigheder

npm install

Start udviklingsserver

npm run dev

Åbn derefter din browser på:

http://localhost:3000

Nuxt-udviklingsserveren genindlæses automatisk, når filer ændres.

Skift fra Mock API til Real API

En af de bedste designbeslutninger i dette projekt er den nemme API-switch .

Sådan forbinder du en rigtig backend:

  1. Indstil miljøvariablen:

NUXT_PUBLIC_USE_MOCK_API=false

  1. Konfigurer din API-basis-URL:

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

  1. Sørg for, at dit backend-svar matcher de typer, der er defineret i:

types/index.ts

Der kræves ingen yderligere kodeændringer.

Tilpasning af bloggen

Udviklere kan nemt tilpasse skabelonen.

Skift tema eller stilarter

Rediger Tailwind-konfigurationen:

tailwind.config.ts

Globale stilarter findes i:

assets/css/main.css

Rediger blogindhold

Mock-indhold kan opdateres i:

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

Dette giver dig mulighed for hurtigt at lave prototyper til forskellige blogdatasæt.

Opdater appindstillinger

Applikationskonstanter såsom navigation, branding og sociale links gemmes i:

utils/constants.ts

Hvorfor bruge denne Nuxt-blogskabelon?

Dette projekt er et godt valg for udviklere, fordi det tilbyder:

  • Ren Nuxt 3-arkitektur

  • Kodestruktur på produktionsniveau

  • Mock API til frontend-udvikling

  • Moderne brugergrænseflade med Tailwind CSS

  • SEO-klare sider

  • Nem integration med rigtige API'er

Det fungerer både som et læringsprojekt og som et produktionsklart blogfundament .

GitHub-arkivet

Du kan udforske den fulde kildekode her: 👉 https://github.com/bfotool/nuxtjs-base-blog

Hvis du finder projektet nyttigt, så overvej at stjernemarkere arkivet og bidrage med forbedringer.