close

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

Hvis du leter etter en moderne Nuxt 3-mal for bloggstartere, er Bfotool Nuxtjs Base Blog en utmerket løsning. Det er en fullt funksjonell bloggapplikasjon bygget med Nuxt 3, Vue 3, TypeScript og Tailwind CSS, designet for å hjelpe utviklere med å raskt bygge en profesjonell blogg uten å trenge en backend under utviklingen.

Prosjektet inkluderer et falskt API-lag drevet av Axios-avskjæringsprogrammer, som simulerer et ekte REST API. Dette gjør det perfekt for å lære Nuxt-arkitektur, prototype applikasjoner eller bygge produksjonsklare bloggplattformer.

Du kan utforske depotet her: 👉 https://github.com/bfotool/nuxtjs-base-blog

Hva er Bfotool Nuxtjs Base Blog?

Bfotool Nuxtjs Base Blog er en moderne bloggmal bygget med den nyeste frontend-teknologien. Den tilbyr et komplett blogggrensesnitt med innlegg, kategorier, søkefunksjonalitet og kontaktsider.

Prosjektet er designet med en ren Nuxt 3-arkitektur, noe som gjør det enkelt å forstå og utvide.

Viktige høydepunkter inkluderer:

  • Komplett blogggrensesnitt med responsivt design

  • Mock REST API for utvikling uten backend

  • Bygget med moderne Vue 3 Composition API

  • Typesikker utvikling med TypeScript

  • SEO-klar metakonfigurasjon

  • Støtte for mørke og lyse temaer

Lageret finner du her:

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

Denne malen er ideell for:

  • Personlige blogger

  • Bedriftsblogger

  • Utviklerporteføljer

  • Lære Nuxt 3-arkitektur

  • Rask prototyping av innholdsnettsteder

Viktige funksjoner

C class="ac-h3"fullstendige bloggsider

Malen inneholder et fullt implementert sett med sider som vanligvis kreves i en bloggplattform.

Hovedsidene inkluderer:

  • Hjemmeside – Viser et fremhevet hovedinnlegg, kategorifiltre og paginerte innlegg

  • Blogginnleggsside – Full artikkelvisning med innholdsfortegnelse og relaterte innlegg

  • Kategoriside – Bla gjennom innlegg filtrert etter kategori

  • Søkeside – Søk i sanntid med avhoppingsfunksjonalitet

  • Om siden – Introduser teamet, oppdraget eller merkevaren din

  • Kontaktside – Kontaktskjema med validering og toast-tilbakemeldinger

  • Feilside – Tilpasset brukergrensesnitt for feilhåndtering

Denne strukturen gir brukerne en brukervennlig bloggopplevelse .

<class="ac-h3"h3>Falsk API-lag for utvikling

En av de kraftigste funksjonene i dette prosjektet er mock API-systemet .

I stedet for å koble til en ekte backend, simulerer prosjektet API-svar ved hjelp av Axios-avskjæringsprogrammer .

Denne tilnærmingen lar utviklere:

  • Bygg frontend-funksjoner uten backend-avhengigheter

  • Test paginering, filtrering og sortering

  • Simuler ekte API-responsforsinkelser

  • Bytt enkelt til en ekte backend senere

Mock-API-et inkluderer endepunkter som:

  • /posts

  • /posts/featured

  • /posts/:slug

  • /categories

  • /authors

  • /contact

Fordi API-et er abstrahert gjennom useApi composable, krever det minimal konfigurasjon å bytte til en ekte backend.

Moderne Nuxt 3-arkitektur

Prosjektet følger anbefalte Nuxt 3-utviklingsmønstre, noe som gjør det til en god referanse for utviklere som lærer seg rammeverket.

Viktige arkitektoniske trekk inkluderer:

  • Automatisk importerte komponenter og komponerbare elementer

  • TypeScript-første utvikling

  • Komponerbart API-tjenestelag

  • Modulær mappestruktur

  • SEO-metakonfigurasjon

  • Sideoverganger

Applikasjonen bruker også:

  • useSeoMeta()for SEO-tagger

  • useColorMode()for temabytte

  • useRoute()og andre innebygde Nuxt-kompositter

Mørk modus og responsiv design

Brukergrensesnittet støtter mørke og lyse temaer ved hjelp av @nuxtjs/color-mode.

Funksjoner inkluderer:

  • Automatisk systemtemagjenkjenning

  • Manuell temaveksling

  • Tailwind CSS-styling

  • Mobilførst responsivt oppsett

Dette sikrer at bloggen fungerer sømløst på tvers av:

  • Skrivebord

  • Nettbrett

  • Mobile enheter

P class="ac-h3"kraftfulle bloggfunksjoner

Bloggmalen inneholder flere avanserte funksjoner som vanligvis finnes i produksjonsbloggplattformer.

Disse inkluderer:

  • Innholdsfortegnelse generert fra overskrifter for nedsatt pris

  • Forslag til relaterte innlegg

  • Estimert lesetid

  • Kategorifiltrering

  • Avvist fulltekstsøk

  • Smart paginering

  • Toast-varsler

  • Laster skjelettkomponenter

  • Animerte sideoverganger

Disse funksjonene skaper en moderne leseopplevelse for bloggbesøkende.

Teknologistabel

Prosjektet er bygget med en moderne frontend-stack.

Lag Teknologi
Rammeverk Nuxt 3.15
UI-bibliotek Vue 3.5
Språk TypeScript 5.7
Styling Tailwind CSS 3.4
Statsforvaltning Pinia
HTTP-klient Axios
Ikoner Ikonifiser via @nuxt/icon
Tema @nuxtjs/fargemodus
Loinging ESLint
Formatering Penere

Denne stakken gir ytelse, skalerbarhet og vedlikeholdbarhet .

Oversikt over prosjektstruktur

Arkivet følger en ren og organisert struktur.

Viktige kataloger inkluderer:

Sider

Katalogen pagesdefinerer hovedrutene:

  • index.vue– Hjemmeside

  • about.vue– Om siden

  • contact.vue– Kontaktskjema

  • search.vue– Søkegrensesnitt

  • blog/[slug].vue– Blogginnleggsside

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

Com class="ac-h3"komponenter

Gjenbrukbare UI-komponenter er gruppert i logiske kategorier:

  • layout– Topptekst og bunntekst

  • common– Paginering, skjelettlastere, toastvarsler

  • blog– Bloggspesifikke komponenter som postkort og innholdsfortegnelse

Comp class="ac-h3"osables

Composables-katalogen inneholder gjenbrukbar logikk.

Viktige komposisjoner inkluderer:

  • useApi()– Typet API-tjenestelag

  • useDebounce()– Avskriv reaktive verdier

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

Mock-systemet ligger inne i mockskatalogen.

Den inneholder:

  • handlers.ts– API-forespørselsavlyttere

  • posts.ts– Eksempel på blogginnlegg

  • authors.ts– Forfatterdata

  • categories.ts– Kategoridata

Denne strukturen gjør det enkelt å endre og utvide prosjektet .

Slik installerer og kjører du prosjektet

Følg disse trinnene for å kjøre prosjektet lokalt.

Forutsetning class="ac-h3"besøk

Du trenger:

  • Node.js 18.17 eller nyere

  • npm, garn eller pnpm

Klon depotet

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

class="ac-h3"Installasjonsavhengigheter

npm install

Start utviklingsserver

npm run dev

Åpne deretter nettleseren din på:

http://localhost:3000

Nuxt-utviklingsserveren vil automatisk laste inn på nytt når filer endres.

Bytte fra Mock API til Real API

En av de beste designavgjørelsene i dette prosjektet er den enkle API-bryteren .

For å koble til en ekte backend:

  1. Sett miljøvariabelen:

NUXT_PUBLIC_USE_MOCK_API=false

  1. Konfigurer API-basis-URL-en din:

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

  1. Sørg for at backend-svaret ditt samsvarer med typene som er definert i:

types/index.ts

Ingen ytterligere kodeendringer er nødvendige.

Tilpasse bloggen

Utviklere kan enkelt tilpasse malen.

Endre tema eller stiler

Rediger Tailwind-konfigurasjonen:

tailwind.config.ts

Globale stiler finnes i:

assets/css/main.css

Endre blogginnhold

Imitert innhold kan oppdateres i:

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

Dette lar deg raskt lage prototyper for forskjellige bloggdatasett.

Oppdater appinnstillinger

Applikasjonskonstanter som navigasjon, merkevarebygging og sosiale lenker lagres i:

utils/constants.ts

Hvorfor bruke denne Nuxt-bloggmalen?

Dette prosjektet er et godt valg for utviklere fordi det tilbyr:

  • Ren Nuxt 3-arkitektur

  • Kodestruktur på produksjonsnivå

  • Mock API for frontend-utvikling

  • Moderne brukergrensesnitt med Tailwind CSS

  • SEO-klare sider

  • Enkel integrasjon med ekte API-er

Det fungerer både som et læringsprosjekt og som et produksjonsklart blogggrunnlag .

GitHub-arkivet

Du kan utforske hele kildekoden her: 👉 https://github.com/bfotool/nuxtjs-base-blog

Hvis du synes prosjektet er nyttig, bør du vurdere å stjernemarkere depotet og bidra med forbedringer.