close

Plantilla de blog basada en Nuxt 3 – Bfotool Blog basado en Nuxtjs(Vue 3 + TypeScript + Tailwind)

Si buscas una plantilla de inicio de blog moderna basada en Nuxt 3, Bfotool Nuxtjs Base Blog es una excelente solución. Es una aplicación de blog completamente funcional, desarrollada con Nuxt 3, Vue 3, TypeScript y Tailwind CSS, diseñada para ayudar a los desarrolladores a crear rápidamente un blog profesional sin necesidad de un backend durante el desarrollo.

El proyecto incluye una capa de API falsa impulsada por interceptores de Axios, que simula una API REST real. Esto lo hace perfecto para aprender la arquitectura Nuxt, crear prototipos de aplicaciones o crear plataformas de blogs listas para producción.

Puedes explorar el repositorio aquí: 👉 https://github.com/bfotool/nuxtjs-base-blog

¿Qué es Bfotool Nuxtjs Base Blog?

Bfotool Nuxtjs Base Blog es una moderna plantilla de aplicación de blog diseñada con las últimas tecnologías frontend. Ofrece una interfaz de blog completa con entradas, categorías, funcionalidad de búsqueda y páginas de contacto.

El proyecto está diseñado con una arquitectura Nuxt 3 limpia, lo que hace que sea fácil de entender y ampliar.

Los aspectos más destacados incluyen:

  • Interfaz de usuario de blog completa con diseño adaptable

  • API REST simulada para desarrollo sin backend

  • Desarrollado con la moderna API de composición Vue 3

  • Desarrollo seguro de tipos con TypeScript

  • Configuración meta preparada para SEO

  • Soporte para temas oscuros y claros

El repositorio se puede encontrar aquí:

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

Esta plantilla es ideal para:

  • Blogs personales

  • Blogs de empresas

  • Carteras de desarrolladores

  • Aprendiendo la arquitectura de Nuxt 3

  • Prototipado rápido de sitios web de contenido

Características principales

Páginas de blog completas de C class="ac-h3"

La plantilla incluye un conjunto completamente implementado de páginas que normalmente se requieren en una plataforma de blog.

Las páginas principales incluyen:

  • Página de inicio: muestra una publicación destacada, filtros de categorías y publicaciones paginadas.

  • Página de entrada de blog: vista completa del artículo con índice y publicaciones relacionadas

  • Página de categoría: Explorar publicaciones filtradas por categoría

  • Página de búsqueda: búsqueda en tiempo real con función antirrebote

  • Página Acerca de: Presenta a tu equipo, misión o marca

  • Página de contacto: formulario de contacto con validación y comentarios

  • Página de error: interfaz de usuario personalizada para el manejo de errores

Esta estructura proporciona a los usuarios una experiencia de blog lista para usar .

Capa de API falsa para desarrollo

Una de las características más poderosas de este proyecto es el sistema de API simulada .

En lugar de conectarse a un backend real, el proyecto simula respuestas de API utilizando interceptores de Axios .

Este enfoque permite a los desarrolladores:

  • Cree funciones frontend sin dependencias backend

  • Pruebe la paginación, el filtrado y la clasificación

  • Simular retrasos reales en la respuesta de la API

  • Cambie fácilmente a un backend real más tarde

La API simulada incluye puntos finales como:

  • /posts

  • /posts/featured

  • /posts/:slug

  • /categories

  • /authors

  • /contact

Debido a que la API se abstrae a través del componente useApi, cambiar a un backend real requiere una configuración mínima.

Arquitectura moderna de Nuxt 3

El proyecto sigue los patrones de desarrollo recomendados de Nuxt 3, lo que lo convierte en una excelente referencia para los desarrolladores que aprenden el marco.

Las características arquitectónicas importantes incluyen:

  • Componentes y componibles importados automáticamente

  • Desarrollo basado en TypeScript

  • Capa de servicio de API componible

  • Estructura de carpetas modular

  • Metaconfiguración SEO

  • Transiciones de página

La aplicación también utiliza:

  • useSeoMeta()para etiquetas SEO

  • useColorMode()para cambiar de tema

  • useRoute()y otros componentes Nuxt integrados

Modo oscuro y diseño responsivo

La interfaz de usuario admite temas oscuros y claros utilizando @nuxtjs/color-mode.

Las características incluyen:

  • Detección automática del tema del sistema

  • Cambio de tema manual

  • Estilo CSS Tailwind

  • Diseño responsivo que prioriza los dispositivos móviles

Esto garantiza que el blog funcione sin problemas en:

  • De oficina

  • Tabletas

  • dispositivos móviles

P class="ac-h3"Funciones poderosas del blog

La plantilla de blog incluye varias funciones avanzadas que normalmente se encuentran en las plataformas de blogs de producción.

Estos incluyen:

  • Tabla de contenidos generada a partir de encabezados de rebajas

  • Sugerencias de publicaciones relacionadas

  • Tiempo estimado de lectura

  • Filtrado de categorías

  • Búsqueda de texto completo sin rebotes

  • Paginación inteligente

  • Notificaciones de brindis

  • Cargando componentes del esqueleto

  • Transiciones de página animadas

Estas características crean una experiencia de lectura moderna para los visitantes del blog.

Pila de tecnología

El proyecto está construido utilizando una pila frontend moderna.

Capa Tecnología
Estructura Nuxt 3.15
Biblioteca de interfaz de usuario Vista 3.5
Idioma TypeScript 5.7
Estilo Viento de cola CSS 3.4
Gestión del Estado Pinia
Cliente HTTP Axios
Iconos Iconificar a través de @nuxt/icon
Tema @nuxtjs/modo-de-color
Pelusa ESLint
Formato Más bonita

Esta pila proporciona rendimiento, escalabilidad y facilidad de mantenimiento .

Descripción general de la estructura del proyecto

El repositorio sigue una estructura limpia y organizada.

Los directorios importantes incluyen:

Páginas

El pagesdirectorio define las rutas principales:

  • index.vue– Página de inicio

  • about.vue– Página Acerca de

  • contact.vue– Formulario de contacto

  • search.vue– Interfaz de búsqueda

  • blog/[slug].vue– Página de publicación del blog

  • blog/category/[slug].vue– Página de categoría

Con componentes de clase="ac-h3"

Los componentes de interfaz de usuario reutilizables se agrupan en categorías lógicas:

  • layout– Encabezado y pie de página

  • common– Paginación, cargadores de esqueleto, notificaciones emergentes

  • blog– Componentes específicos del blog, como postales y tablas de contenido.

Comp class="ac-h3"osables

El directorio componibles contiene lógica reutilizable.

Los elementos componibles importantes incluyen:

  • useApi()– Capa de servicio de API tipificada

  • useDebounce()– Reducir el rebote de valores reactivos

Capa de API simulada

El sistema simulado se encuentra dentro del mocksdirectorio.

Contiene:

  • handlers.ts– Interceptores de solicitudes API

  • posts.ts– Ejemplos de publicaciones de blog

  • authors.ts– Datos del autor

  • categories.ts– Datos de categoría

Esta estructura hace que el proyecto sea fácil de modificar y ampliar .

Cómo instalar y ejecutar el proyecto

Siga estos pasos para ejecutar el proyecto localmente.

Clase prerrequisito="ac-h3"uisites

Necesitas:

  • Node.js 18.17 o posterior

  • npm, hilo o pnpm

Clonar el repositorio

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

class="ac-h3"Instalar dependencias

npm install

Iniciar servidor de desarrollo

npm run dev

Luego abre tu navegador en:

http://localhost:3000

El servidor de desarrollo Nuxt se recargará automáticamente cuando los archivos cambien.

Cambiar de API simulada a API real

Una de las mejores decisiones de diseño en este proyecto es el fácil cambio de API .

Para conectar un backend real:

  1. Establecer la variable de entorno:

NUXT_PUBLIC_USE_MOCK_API=false

  1. Configure la URL base de su API:

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

  1. Asegúrese de que su respuesta de backend coincida con los tipos definidos en:

types/index.ts

No se requieren cambios de código adicionales.

Personalización del blog

Los desarrolladores pueden personalizar la plantilla fácilmente.

Cambiar tema o estilos

Editar la configuración de Tailwind:

tailwind.config.ts

Los estilos globales se encuentran en:

assets/css/main.css

Modificar el contenido del blog

El contenido simulado se puede actualizar en:

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

Esto le permite crear rápidamente prototipos de diferentes conjuntos de datos de blogs.

Actualizar la configuración de la aplicación

Las constantes de la aplicación, como la navegación, la marca y los enlaces sociales, se almacenan en:

utils/constants.ts

¿Por qué utilizar esta plantilla de blog de Nuxt?

Este proyecto es una excelente opción para los desarrolladores porque proporciona:

  • Arquitectura limpia de Nuxt 3

  • Estructura del código a nivel de producción

  • API simulada para el desarrollo frontend

  • Interfaz de usuario moderna con Tailwind CSS

  • Páginas preparadas para SEO

  • Fácil integración con API reales

Funciona tanto como un proyecto de aprendizaje como una base de blog lista para producción .

Repositorio de GitHub

Puedes explorar el código fuente completo aquí: 👉 https://github.com/bfotool/nuxtjs-base-blog

Si encuentra útil el proyecto, considere marcar el repositorio como favorito y contribuir con mejoras.