close

Nuxt 3 Base-bloggmall – Bfotool Nuxtjs Base-blogg(Vue 3 + TypeScript + Tailwind)

Om du letar efter en modern Nuxt 3-mall för bloggstartare är Bfotool Nuxtjs Base Blog en utmärkt lösning. Det är en fullt fungerande bloggapplikation byggd med Nuxt 3, Vue 3, TypeScript och Tailwind CSS, utformad för att hjälpa utvecklare att snabbt bygga en professionell blogg utan att behöva en backend under utvecklingen.

Projektet inkluderar ett falskt API-lager som drivs av Axios-interceptorer, vilket simulerar ett riktigt REST API. Detta gör det perfekt för att lära sig Nuxt-arkitektur, prototypa applikationer eller bygga produktionsklara bloggplattformar.

Du kan utforska arkivet här: 👉 https://github.com/bfotool/nuxtjs-base-blog

Vad är Bfotool Nuxtjs Base Blog?

Bfotool Nuxtjs Base Blog är en modern bloggapplikationsmall byggd med den senaste frontend-tekniken. Den erbjuder ett komplett blogggränssnitt med inlägg, kategorier, sökfunktioner och kontaktsidor.

Projektet är utformat med en ren Nuxt 3-arkitektur, vilket gör det enkelt att förstå och utöka.

Viktiga höjdpunkter inkluderar:

  • Komplett blogggränssnitt med responsiv design

  • Mock REST API för utveckling utan backend

  • Byggt med moderna Vue 3 Composition API

  • Typsäker utveckling med TypeScript

  • SEO-klar metakonfiguration

  • Stöd för mörka och ljusa teman

Förrådet finns här:

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

Denna mall är idealisk för:

  • Personliga bloggar

  • Företagsbloggar

  • Utvecklarportföljer

  • Lärande av Nuxt 3-arkitekturen

  • Snabb prototypframställning av innehållswebbplatser

Viktiga funktioner

C class="ac-h3"kompletta bloggsidor

Mallen innehåller en fullt implementerad uppsättning sidor som vanligtvis krävs på en bloggplattform.

Huvudsidorna inkluderar:

  • Hemsida – Visar ett utvalt huvudinlägg, kategorifilter och paginerade inlägg

  • Blogginläggssida – Fullständig artikelvy med innehållsförteckning och relaterade inlägg

  • Kategorisida – Bläddra bland inlägg filtrerade efter kategori

  • Söksida – Sökning i realtid med avhoppningsfunktion

  • Om sidan – Presentera ditt team, uppdrag eller varumärke

  • Kontaktsida – Kontaktformulär med validering och toast-feedback

  • Felsida – Anpassat gränssnitt för felhantering

Den här strukturen ger användarna en färdig bloggupplevelse .

< class="ac-h3"h3>Falskt API-lager för utveckling

En av de kraftfullaste funktionerna i det här projektet är det simulerade API-systemet .

Istället för att ansluta till en riktig backend simulerar projektet API-svar med hjälp av Axios-interceptorer .

Denna metod gör det möjligt för utvecklare att:

  • Bygg frontend-funktioner utan backend-beroenden

  • Testa paginering, filtrering och sortering

  • Simulera verkliga API-svarsfördröjningar

  • Byt enkelt till en riktig backend senare

Mock-API:et inkluderar slutpunkter som:

  • /posts

  • /posts/featured

  • /posts/:slug

  • /categories

  • /authors

  • /contact

Eftersom API:et är abstraherat genom useApi composable kräver byte till en riktig backend minimal konfiguration.

Modern Nuxt 3-arkitektur

Projektet följer rekommenderade Nuxt 3-utvecklingsmönster, vilket gör det till en utmärkt referens för utvecklare som lär sig ramverket.

Viktiga arkitektoniska särdrag inkluderar:

  • Automatiskt importerade komponenter och kompositer

  • TypeScript-första utvecklingen

  • Komponerbart API-tjänstlager

  • Modulär mappstruktur

  • SEO-metakonfiguration

  • Sidövergångar

Applikationen använder även:

  • useSeoMeta()för SEO-taggar

  • useColorMode()för temabyte

  • useRoute()och andra inbyggda Nuxt-kompositer

Mörkt läge och responsiv design

Användargränssnittet stöder mörka och ljusa teman med hjälp av @nuxtjs/color-mode.

Funktioner inkluderar:

  • Automatisk systemtemaidentifiering

  • Manuell temaväxling

  • CSS-styling för Tailwind

  • Mobilt anpassad responsiv layout

Detta säkerställer att bloggen fungerar smidigt på tvärs över:

  • Skrivbord

  • Tabletter

  • Mobila enheter

Kraftfulla bloggfunktioner

Bloggmallen innehåller flera avancerade funktioner som vanligtvis finns i produktionsbloggplattformar.

Dessa inkluderar:

  • Innehållsförteckning genererad från rubriker för nedsatt prissättning

  • Förslag på relaterade inlägg

  • Beräknad läsningstid

  • Kategorifiltrering

  • Avböjda fulltextsökningar

  • Smart paginering

  • Toast-aviseringar

  • Laddar skelettkomponenter

  • Animerade sidövergångar

Dessa funktioner skapar en modern läsupplevelse för bloggbesökare.

Teknikstack

Projektet är byggt med hjälp av en modern frontend-stack.

Lager Teknologi
Ram Nuxt 3.15
UI-bibliotek Vue 3.5
Språk TypeScript 5.7
Styling Medvind CSS 3.4
Statlig förvaltning Pinia
HTTP-klient Axios
Ikoner Ikonera via @nuxt/icon
Tema @nuxtjs/färgläge
Luddning ESLint
Formatering Sötare

Denna stack ger prestanda, skalbarhet och underhållbarhet .

Översikt över projektstruktur

Arkivet följer en ren och organiserad struktur.

Viktiga kataloger inkluderar:

Sidor

Katalogen pagesdefinierar huvudvägarna:

  • index.vue– Hemsida

  • about.vue– Om sidan

  • contact.vue– Kontaktformulär

  • search.vue– Sökgränssnitt

  • blog/[slug].vue– Blogginläggssida

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

Com class="ac-h3"komponenter

Återanvändbara UI-komponenter grupperas i logiska kategorier:

  • layout– Sidhuvud och sidfot

  • common– Paginering, skelettladdare, toast-meddelanden

  • blog– Bloggspecifika komponenter som vykort och innehållsförteckning

Comp class="ac-h3"osables

Katalogen composables innehåller återanvändbar logik.

Viktiga kompositioner inkluderar:

  • useApi()– Typat API-tjänstlager

  • useDebounce()– Avbouncera reaktiva värden

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

Mock-systemet finns inuti mockskatalogen.

Den innehåller:

  • handlers.ts– API-förfrågningsavlyssnare

  • posts.ts– Exempel på blogginlägg

  • authors.ts– Författaruppgifter

  • categories.ts– Kategoridata

Denna struktur gör det enkelt att modifiera och utöka projektet .

Hur man installerar och kör projektet

Följ dessa steg för att köra projektet lokalt.

Förutsättning class="ac-h3"websites

Du behöver:

  • Node.js 18.17 eller senare

  • npm, garn eller pnpm

Klona arkivet

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

class="ac-h3"Installera beroenden

npm install

Starta utvecklingsservern

npm run dev

Öppna sedan din webbläsare på:

http://localhost:3000

Nuxt-utvecklingsservern laddas om automatiskt när filer ändras.

Byta från Mock API till Real API

Ett av de bästa designbesluten i det här projektet är den enkla API-växlingen .

För att ansluta en riktig backend:

  1. Ställ in miljövariabeln:

NUXT_PUBLIC_USE_MOCK_API=false

  1. Konfigurera din API-bas-URL:

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

  1. Se till att ditt backend-svar matchar de typer som definieras i:

types/index.ts

Inga ytterligare kodändringar krävs.

Anpassa bloggen

Utvecklare kan enkelt anpassa mallen.

Ändra tema eller stilar

Redigera Tailwind-konfigurationen:

tailwind.config.ts

Globala stilar finns i:

assets/css/main.css

Ändra blogginnehåll

Mock-innehåll kan uppdateras i:

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

Detta gör att du snabbt kan prototypa olika bloggdataset.

Uppdatera appinställningar

Applikationskonstanter som navigering, varumärkesbyggande och sociala länkar lagras i:

utils/constants.ts

Varför använda den här Nuxt-bloggmallen?

Detta projekt är ett utmärkt val för utvecklare eftersom det erbjuder:

  • Ren Nuxt 3-arkitektur

  • Kodstruktur på produktionsnivå

  • Mock API för frontend-utveckling

  • Modernt användargränssnitt med Tailwind CSS

  • SEO-klara sidor

  • Enkel integration med riktiga API:er

Det fungerar både som ett lärandeprojekt och som en produktionsklar blogggrund .

GitHub-arkivet

Du kan utforska hela källkoden här: 👉 https://github.com/bfotool/nuxtjs-base-blog

Om du tycker att projektet är användbart, överväg att stjärnmärka arkivet och bidra med förbättringar.