close

Nuxt 3 basisblogtemplate – Bfotool Nuxtjs basisblog(Vue 3 + TypeScript + Tailwind)

Als je op zoek bent naar een moderne Nuxt 3 blogtemplate, is de Bfotool Nuxtjs Base Blog een uitstekende oplossing. Het is een volledig functionele blogapplicatie, gebouwd met Nuxt 3, Vue 3, TypeScript en Tailwind CSS, ontworpen om ontwikkelaars te helpen snel een professionele blog te bouwen zonder dat ze tijdens de ontwikkeling een backend nodig hebben.

Het project omvat een gesimuleerde API-laag, aangedreven door Axios-interceptors, die een echte REST API nabootst. Dit maakt het perfect voor het leren van de Nuxt-architectuur, het prototypen van applicaties of het bouwen van productieklare blogplatformen.

Je kunt de repository hier bekijken: 👉 https://github.com/bfotool/nuxtjs-base-blog

Wat is Bfotool Nuxtjs Base Blog?

Bfotool Nuxtjs Base Blog is een moderne blogapplicatietemplate, gebouwd met de nieuwste frontend-technologieën. Het biedt een complete bloginterface met berichten, categorieën, zoekfunctionaliteit en contactpagina's.

Het project is ontworpen met een overzichtelijke Nuxt 3-architectuur, waardoor het gemakkelijk te begrijpen en uit te breiden is.

Belangrijkste kenmerken zijn onder meer:

  • Complete blog-UI met responsief ontwerp

  • Mock REST API voor ontwikkelingsdoeleinden zonder backend

  • Gebouwd met de moderne Vue 3 Composition API.

  • Typeveilig ontwikkelen met TypeScript

  • SEO-vriendelijke meta-configuratie

  • Ondersteuning voor donkere en lichte thema's

De repository is hier te vinden:

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

Deze sjabloon is ideaal voor:

  • Persoonlijke blogs

  • Bedrijfsblogs

  • Ontwikkelaarsportfolio's

  • Nuxt 3-architectuur leren

  • Snelle prototyping van contentwebsites

Belangrijkste kenmerken

C class="ac-h3"complete Blog Pages

De template bevat een volledig uitgewerkte set pagina's die doorgaans nodig zijn op een blogplatform.

De belangrijkste pagina's zijn:

  • Startpagina – Toont een uitgelicht hero-bericht, categoriefilters en berichten in paginering.

  • Blogpagina – Volledige artikelweergave met inhoudsopgave en gerelateerde berichten

  • Categoriepagina – Blader door berichten gefilterd op categorie

  • Zoekpagina – Realtime zoeken met debounce-functionaliteit

  • Over ons-pagina – Stel je team, missie of merk voor.

  • Contactpagina – Contactformulier met validatie en pop-upfeedback

  • Foutpagina – Aangepaste gebruikersinterface voor foutafhandeling

Deze structuur biedt gebruikers een direct bruikbare blogervaring .

< class="ac-h3"h3>Nep-API-laag voor ontwikkeling

Een van de krachtigste functies van dit project is het mock API-systeem .

In plaats van verbinding te maken met een echte backend, simuleert het project API-reacties met behulp van Axios-interceptors .

Deze aanpak stelt ontwikkelaars in staat om:

  • Ontwikkel frontend-functionaliteiten zonder afhankelijkheden van de backend.

  • Test paginering, filtering en sortering.

  • Simuleer daadwerkelijke API-responsvertragingen.

  • Later eenvoudig overschakelen naar een echte backend

De mock-API bevat eindpunten zoals:

  • /posts

  • /posts/featured

  • /posts/:slug

  • /categories

  • /authors

  • /contact

Omdat de API geabstraheerd is via de useApi composable, vereist overschakelen naar een echte backend minimale configuratie.

Moderne Nuxt 3-architectuur

Het project volgt de aanbevolen ontwikkelingspatronen van Nuxt 3, waardoor het een uitstekend naslagwerk is voor ontwikkelaars die het framework willen leren kennen.

Belangrijke architectonische kenmerken zijn onder meer:

  • Automatisch geïmporteerde componenten en combineerbare elementen

  • TypeScript-first ontwikkeling

  • Composeerbare API-servicelaag

  • Modulaire mapstructuur

  • SEO-meta-configuratie

  • Paginaovergangen

De applicatie maakt ook gebruik van:

  • useSeoMeta()voor SEO-tags

  • useColorMode()voor het wisselen van thema's

  • useRoute()en andere ingebouwde Nuxt-composables

< class="ac-h3"h3>Donkere modus en responsief ontwerp</ ...

De gebruikersinterface ondersteunt donkere en lichte thema's@nuxtjs/color-mode .

De kenmerken omvatten:

  • Automatische detectie van systeemthema's

  • Handmatige thema-schakelaar

  • Tailwind CSS-styling

  • Mobielvriendelijke, responsieve lay-out

Dit zorgt ervoor dat de blog probleemloos werkt op:

  • bureaublad

  • Tabletten

  • Mobiele apparaten

P class="ac-h3" krachtige blogfuncties

De blogtemplate bevat diverse geavanceerde functies die doorgaans te vinden zijn in professionele blogplatformen.

Deze omvatten:

  • Inhoudsopgave gegenereerd op basis van markdown-koppen

  • Suggesties voor gerelateerde berichten

  • Geschatte leestijd

  • Categoriefiltering

  • Debounced full-text search

  • Slimme paginering

  • Toastmeldingen

  • Het laden van skeletcomponenten

  • Geanimeerde paginaovergangen

Deze kenmerken zorgen voor een moderne leeservaring voor bezoekers van de blog.

Technologie-stack

Het project is gebouwd met behulp van een moderne frontend-stack.

Laag Technologie
Kader Nuxt 3.15
UI-bibliotheek Vue 3.5
Taal TypeScript 5.7
Styling Tailwind CSS 3.4
Staatsbestuur Pinia
HTTP-client Axios
Pictogrammen Iconify via @nuxt/icon
Thema @nuxtjs/color-mode
Pluisjes ESLint
Opmaak Mooier

Deze technologie biedt prestaties, schaalbaarheid en onderhoudbaarheid .

Overzicht van de projectstructuur

De repository volgt een overzichtelijke en georganiseerde structuur.

Belangrijke mappen zijn onder andere:

Pagina's

De pagesmap definieert de belangrijkste routes:

  • index.vue– Startpagina

  • about.vue– Over ons-pagina

  • contact.vue– Contactformulier

  • search.vue– Zoekinterface

  • blog/[slug].vue– Blogpagina

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

Com class="ac-h3" componenten

Herbruikbare UI-componenten zijn gegroepeerd in logische categorieën:

  • layout– Koptekst en voettekst

  • common– Paginering, skeleton loaders, toastnotificaties

  • blog– Blogspecifieke onderdelen zoals ansichtkaarten en inhoudsopgave

Comp class="ac-h3"osables

De map 'composesables' bevat herbruikbare logica.

Belangrijke composables zijn onder andere:

  • useApi()– Getypte API-servicelaag

  • useDebounce()– Debounce reactieve waarden

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

Het mock-systeem bevindt zich in de mocksbetreffende map.

Het bevat:

  • handlers.ts– API-verzoekonderscheppers

  • posts.ts– Voorbeelden van blogberichten

  • authors.ts– Auteursgegevens

  • categories.ts– Categoriegegevens

Deze structuur maakt het project gemakkelijk aan te passen en uit te breiden .

Hoe installeer en voer ik het project uit?

Volg deze stappen om het project lokaal uit te voeren.

Vereiste klasse="ac-h3"uisites

Je hebt nodig:

  • Node.js 18.17 of later

  • npm, yarn of pnpm

Kloon de repository

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

class="ac-h3"Afhankelijkheden installeren

npm install

Start de ontwikkelingsserver

npm run dev

Open vervolgens uw browser op:

http://localhost:3000

De Nuxt-ontwikkelingsserver wordt automatisch opnieuw geladen wanneer bestanden worden gewijzigd.

Overstappen van mock-API naar echte API

Een van de beste ontwerpbeslissingen in dit project is de eenvoudige API-wissel .

Om een ​​echte backend te koppelen:

  1. Stel de omgevingsvariabele in:

NUXT_PUBLIC_USE_MOCK_API=false

  1. Configureer de basis-URL van uw API:

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

  1. Zorg ervoor dat uw backend-respons overeenkomt met de typen die zijn gedefinieerd in:

types/index.ts

Er zijn geen verdere codewijzigingen nodig.

De blog aanpassen

Ontwikkelaars kunnen de sjabloon eenvoudig aanpassen.

Thema of stijlen wijzigen

Bewerk de Tailwind-configuratie:

tailwind.config.ts

Wereldwijde stijlen zijn te vinden in:

assets/css/main.css

Bloginhoud wijzigen

De mock-content kan worden bijgewerkt in:

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

Hiermee kunt u snel prototypes maken van verschillende blogdatasets.

App-instellingen bijwerken

Applicatieconstanten zoals navigatie, branding en sociale links worden opgeslagen in:

utils/constants.ts

Waarom zou je deze Nuxt-blogtemplate gebruiken?

Dit project is een uitstekende keuze voor ontwikkelaars omdat het het volgende biedt:

  • Schone Nuxt 3-architectuur

  • Codestructuur op productieniveau

  • Mock-API voor frontend-ontwikkeling

  • Moderne gebruikersinterface met Tailwind CSS

  • SEO-vriendelijke pagina's

  • Eenvoudige integratie met echte API's

Het functioneert zowel als leerproject als als een kant-en-klare blogbasis .

GitHub-repository

Je kunt de volledige broncode hier bekijken: 👉 https://github.com/bfotool/nuxtjs-base-blog

Als je het project nuttig vindt, overweeg dan om de repository een ster te geven en bij te dragen aan verbeteringen.