close

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

If you are looking for a modern Nuxt 3 blog starter template, the Bfotool Nuxtjs Base Blog is an excellent solution. It is a fully functional blog application built with Nuxt 3, Vue 3, TypeScript, and Tailwind CSS, designed to help developers quickly build a professional blog without needing a backend during development.

The project includes a fake API layer powered by Axios interceptors, which simulates a real REST API. This makes it perfect for learning Nuxt architecture, prototyping applications, or building production-ready blog platforms.

You can explore the repository here: 👉 https://github.com/bfotool/nuxtjs-base-blog

What is Bfotool Nuxtjs Base Blog?

Bfotool Nuxtjs Base Blog is a modern blog application template built using the latest frontend technologies. It provides a complete blogging interface with posts, categories, search functionality, and contact pages.

The project is designed with a clean Nuxt 3 architecture, making it easy to understand and extend.

Key highlights include:

  • Full blog UI with responsive design

  • Mock REST API for development without backend

  • Built with modern Vue 3 Composition API

  • Type-safe development with TypeScript

  • SEO-ready meta configuration

  • Dark and light theme support

The repository can be found here:

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

This template is ideal for:

  • Personal blogs

  • Company blogs

  • Developer portfolios

  • Learning Nuxt 3 architecture

  • Rapid prototyping of content websites

Key Features

C class="ac-h3"omplete Blog Pages

The template includes a fully implemented set of pages typically required in a blog platform.

Main pages include:

  • Home Page – Displays a featured hero post, category filters, and paginated posts

  • Blog Post Page – Full article view with table of contents and related posts

  • Category Page – Browse posts filtered by category

  • Search Page – Real-time search with debounce functionality

  • About Page – Introduce your team, mission, or brand

  • Contact Page – Contact form with validation and toast feedback

  • Error Page – Custom error handling UI

This structure provides a ready-to-use blog experience for users.

< class="ac-h3"h3>Fake API Layer for Development

One of the most powerful features of this project is the mock API system.

Instead of connecting to a real backend, the project simulates API responses using Axios interceptors.

This approach allows developers to:

  • Build frontend features without backend dependencies

  • Test pagination, filtering, and sorting

  • Simulate real API response delays

  • Easily switch to a real backend later

The mock API includes endpoints such as:

  • /posts

  • /posts/featured

  • /posts/:slug

  • /categories

  • /authors

  • /contact

Because the API is abstracted through the useApi composable, switching to a real backend requires minimal configuration.

Modern Nuxt 3 Architecture

The project follows recommended Nuxt 3 development patterns, making it a great reference for developers learning the framework.

Important architectural features include:

  • Auto-imported components and composables

  • TypeScript-first development

  • Composable API service layer

  • Modular folder structure

  • SEO meta configuration

  • Page transitions

The application also uses:

  • useSeoMeta() for SEO tags

  • useColorMode() for theme switching

  • useRoute() and other built-in Nuxt composables

< class="ac-h3"h3>Dark Mode and Responsive Design

The UI supports dark and light themes using @nuxtjs/color-mode.

Features include:

  • Automatic system theme detection

  • Manual theme toggle

  • Tailwind CSS styling

  • Mobile-first responsive layout

This ensures the blog works seamlessly across:

  • Desktop

  • Tablets

  • Mobile devices

P class="ac-h3"owerful Blog Features

The blog template includes several advanced features typically found in production blog platforms.

These include:

  • Table of contents generated from markdown headings

  • Related posts suggestions

  • Estimated reading time

  • Category filtering

  • Debounced full-text search

  • Smart pagination

  • Toast notifications

  • Loading skeleton components

  • Animated page transitions

These features create a modern reading experience for blog visitors.

Technology Stack

The project is built using a modern frontend stack.

Layer Technology
Framework Nuxt 3.15
UI Library Vue 3.5
Language TypeScript 5.7
Styling Tailwind CSS 3.4
State Management Pinia
HTTP Client Axios
Icons Iconify via @nuxt/icon
Theme @nuxtjs/color-mode
Linting ESLint
Formatting Prettier

This stack provides performance, scalability, and maintainability.

Project Structure Overview

The repository follows a clean and organized structure.

Important directories include:

Pages

The pages directory defines the main routes:

  • index.vue – Homepage

  • about.vue – About page

  • contact.vue – Contact form

  • search.vue – Search interface

  • blog/[slug].vue – Blog post page

  • blog/category/[slug].vue – Category page

Com class="ac-h3"ponents

Reusable UI components are grouped into logical categories:

  • layout – Header and footer

  • common – Pagination, skeleton loaders, toast notifications

  • blog – Blog-specific components like post cards and table of contents

Comp class="ac-h3"osables

The composables directory contains reusable logic.

Important composables include:

  • useApi() – Typed API service layer

  • useDebounce() – Debounce reactive values

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

The mock system is located inside the mocks directory.

It contains:

  • handlers.ts – API request interceptors

  • posts.ts – Sample blog posts

  • authors.ts – Author data

  • categories.ts – Category data

This structure makes the project easy to modify and extend.

How to Install and Run the Project

Follow these steps to run the project locally.

Prereq class="ac-h3"uisites

You need:

  • Node.js 18.17 or later

  • npm, yarn, or pnpm

Clone the Repository

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

class="ac-h3"Install Dependencies

npm install

Start Development Server

npm run dev

Then open your browser at:

http://localhost:3000

The Nuxt development server will automatically reload when files change.

Switching from Mock API to Real API

One of the best design decisions in this project is the easy API switch.

To connect a real backend:

  1. Set the environment variable:

NUXT_PUBLIC_USE_MOCK_API=false

  1. Configure your API base URL:

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

  1. Ensure your backend response matches the types defined in:

types/index.ts

No additional code changes are required.

Customizing the Blog

Developers can easily customize the template.

Change Theme or Styles

Edit the Tailwind configuration:

tailwind.config.ts

Global styles are located in:

assets/css/main.css

Modify Blog Content

Mock content can be updated in:

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

This allows you to quickly prototype different blog datasets.

Update App Settings

Application constants such as navigation, branding, and social links are stored in:

utils/constants.ts

Why Use This Nuxt Blog Template?

This project is a great choice for developers because it provides:

  • Clean Nuxt 3 architecture

  • Production-level code structure

  • Mock API for frontend development

  • Modern UI with Tailwind CSS

  • SEO-ready pages

  • Easy integration with real APIs

It works both as a learning project and as a production-ready blog foundation.

GitHub Repository

You can explore the full source code here: 👉 https://github.com/bfotool/nuxtjs-base-blog

If you find the project useful, consider starring the repository and contributing improvements.