close

Modèle de blog de base Nuxt 3 – Blog de base Bfotool Nuxtjs(Vue 3 + TypeScript + Tailwind)

Si vous recherchez un modèle de blog Nuxt 3 moderne pour démarrer, le blog de base Bfotool Nuxtjs est une excellente solution. Il s'agit d'une application de blog entièrement fonctionnelle, développée avec Nuxt 3, Vue 3, TypeScript et Tailwind CSS, conçue pour aider les développeurs à créer rapidement un blog professionnel sans avoir besoin de backend pendant le développement.

Ce projet inclut une couche API factice, alimentée par les intercepteurs Axios, qui simule une véritable API REST. Il est donc idéal pour apprendre l'architecture Nuxt, prototyper des applications ou créer des plateformes de blog prêtes pour la production.

Vous pouvez explorer le dépôt ici : 👉 https://github.com/bfotool/nuxtjs-base-blog

Qu'est-ce que le blog Bfotool Nuxtjs Base ?

Bfotool Nuxtjs Base Blog est un modèle d'application de blog moderne, conçu avec les dernières technologies front-end. Il offre une interface de blog complète avec articles, catégories, fonction de recherche et page de contact.

Le projet est conçu avec une architecture Nuxt 3 épurée, ce qui le rend facile à comprendre et à étendre.

Les principaux points saillants sont les suivants :

  • Interface utilisateur de blog complète avec design adaptatif

  • API REST factice pour le développement sans backend

  • Construit avec l'API de composition moderne Vue 3

  • Développement sécurisé avec TypeScript

  • Configuration méta optimisée pour le référencement(SEO)

  • Prise en charge des thèmes clairs et sombres

Le dépôt se trouve ici :

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

Ce modèle est idéal pour:

  • Blogs personnels

  • Blogs d'entreprise

  • Portefeuilles de développeurs

  • Apprendre l'architecture Nuxt 3

  • Prototypage rapide de sites web de contenu

Caractéristiques principales

Classe C="ac-h3"pages de blog complètes

Le modèle inclut un ensemble complet de pages généralement requises sur une plateforme de blog.

Les pages principales comprennent :

  • Page d'accueil – Affiche un article vedette, des filtres de catégorie et une pagination des articles.

  • Page de l'article de blog – Vue complète de l'article avec table des matières et articles associés

  • Page de catégorie – Parcourez les articles filtrés par catégorie

  • Page de recherche – Recherche en temps réel avec fonction anti-rebond

  • Page À propos – Présentez votre équipe, votre mission ou votre marque

  • Page de contact – Formulaire de contact avec validation et notification de confirmation

  • Page d'erreur – Interface utilisateur personnalisée de gestion des erreurs

Cette structure offre aux utilisateurs une expérience de blog prête à l'emploi .

< class="ac-h3"h3>Fausse couche API pour le développement

L'une des fonctionnalités les plus puissantes de ce projet est le système d'API factice .

Au lieu de se connecter à un véritable serveur dorsal, le projet simule les réponses de l'API à l'aide d'intercepteurs Axios .

Cette approche permet aux développeurs de :

  • Créez des fonctionnalités front-end sans dépendances back-end.

  • Tester la pagination, le filtrage et le tri

  • Simuler les délais de réponse réels d'une API

  • Passez facilement à un véritable backend ultérieurement.

L'API simulée comprend des points de terminaison tels que :

  • /posts

  • /posts/featured

  • /posts/:slug

  • /categories

  • /authors

  • /contact

Comme l'API est abstraite via le composant useApi, le passage à un véritable backend nécessite une configuration minimale.

Architecture moderne Nuxt 3

Ce projet suit les modèles de développement recommandés pour Nuxt 3, ce qui en fait une excellente référence pour les développeurs qui apprennent ce framework.

Les éléments architecturaux importants comprennent :

  • Composants et composables importés automatiquement

  • Développement axé sur TypeScript

  • couche de service API composable

  • Structure de dossiers modulaires

  • configuration des métadonnées SEO

  • Transitions de page

L'application utilise également :

  • useSeoMeta()pour les balises SEO

  • useColorMode()pour le changement de thème

  • useRoute()et d'autres composables Nuxt intégrés

< class="ac-h3"h3>Mode sombre et conception adaptative

L'interface utilisateur prend en charge les thèmes clairs et sombres en utilisant @nuxtjs/color-mode.

Caractéristiques :

  • Détection automatique du thème système

  • Basculement manuel du thème

  • Style CSS Tailwind

  • Mise en page adaptative axée sur les mobiles

Cela garantit le bon fonctionnement du blog sur :

  • Ordinateur de bureau

  • Comprimés

  • appareils mobiles

Fonctionnalités puissantes du blog

Le modèle de blog inclut plusieurs fonctionnalités avancées que l'on retrouve généralement sur les plateformes de blogs professionnelles.

Cela comprend:

  • Table des matières générée à partir des titres Markdown

  • Suggestions d'articles similaires

  • Temps de lecture estimé

  • Filtrage par catégorie

  • Recherche en texte intégral déboguée

  • Pagination intelligente

  • Notifications Toast

  • Chargement des composants squelettes

  • Transitions de page animées

Ces fonctionnalités offrent une expérience de lecture moderne aux visiteurs du blog.

Pile technologique

Le projet est construit à l'aide d'une architecture frontend moderne.

Couche Technologie
Cadre Nuxt 3.15
Bibliothèque d'interface utilisateur Vue 3.5
Langue TypeScript 5.7
stylisme Tailwind CSS 3.4
Gestion de l'État Pinia
Client HTTP Axios
Icônes Iconify via @nuxt/icon
Thème @nuxtjs/color-mode
peluches ESLint
Mise en forme Plus joli

Cette pile technologique offre performance, évolutivité et maintenabilité .

Aperçu de la structure du projet

Le dépôt suit une structure propre et organisée.

Les répertoires importants comprennent :

Pages

Le pagesrépertoire définit les routes principales :

  • index.vue– Page d'accueil

  • about.vue– Page À propos

  • contact.vue– Formulaire de contact

  • search.vue– Interface de recherche

  • blog/[slug].vue– Page de l'article de blog

  • blog/category/[slug].vue– Page de catégorie

Com class="ac-h3"ponents

Les composants d'interface utilisateur réutilisables sont regroupés en catégories logiques :

  • layout– En-tête et pied de page

  • common– Pagination, indicateurs de chargement, notifications toast

  • blog– Éléments spécifiques aux blogs, tels que les cartes postales et la table des matières

Classe de comp="ac-h3"osables

Le répertoire composables contient la logique réutilisable.

Les éléments composables importants comprennent :

  • useApi()– Couche de service API typée

  • useDebounce()– Valeurs réactives de rebond

< class="ac-h3"h3>Couche API factice

Le système factice se trouve dans le mocksrépertoire.

Il contient:

  • handlers.ts– Intercepteurs de requêtes API

  • posts.ts– Exemples d'articles de blog

  • authors.ts– Données de l'auteur

  • categories.ts– Données de catégorie

Cette structure facilite la modification et l'extension du projet .

Comment installer et exécuter le projet

Suivez ces étapes pour exécuter le projet en local.

Prereq class="ac-h3"uisites

Vous avez besoin de:

  • Node.js 18.17 ou version ultérieure

  • npm, yarn ou pnpm

Cloner le dépôt

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

class="ac-h3"Installer les dépendances

npm install

Serveur de développement de démarrage

npm run dev

Ouvrez ensuite votre navigateur à l'adresse :

http://localhost:3000

Le serveur de développement Nuxt se rechargera automatiquement lorsque des fichiers seront modifiés.

Passage d'une API factice à une API réelle

L'une des meilleures décisions de conception de ce projet est la facilité de basculement vers l'API .

Pour connecter un véritable serveur dorsal :

  1. Définissez la variable d'environnement :

NUXT_PUBLIC_USE_MOCK_API=false

  1. Configurez l'URL de base de votre API :

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

  1. Assurez-vous que la réponse de votre serveur corresponde aux types définis dans :

types/index.ts

Aucune modification de code supplémentaire n'est requise.

Personnaliser le blog

Les développeurs peuvent facilement personnaliser le modèle.

Changer de thème ou de style

Modifier la configuration de Tailwind :

tailwind.config.ts

Les styles internationaux se trouvent dans :

assets/css/main.css

Modifier le contenu du blog

Le contenu fictif peut être mis à jour dans :

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

Cela vous permet de prototyper rapidement différents ensembles de données de blogs.

Mettre à jour les paramètres de l'application

Les constantes de l'application, telles que la navigation, la marque et les liens vers les réseaux sociaux, sont stockées dans :

utils/constants.ts

Pourquoi utiliser ce modèle de blog Nuxt ?

Ce projet est un excellent choix pour les développeurs car il offre :

  • Architecture propre de Nuxt 3

  • Structure du code de niveau production

  • API factice pour le développement frontend

  • Interface utilisateur moderne avec Tailwind CSS

  • Pages optimisées pour le référencement

  • Intégration facile avec les API réelles

Il fonctionne à la fois comme projet d'apprentissage et comme base pour un blog prêt à la production .

Dépôt GitHub

Vous pouvez consulter le code source complet ici : 👉 https://github.com/bfotool/nuxtjs-base-blog

Si vous trouvez ce projet utile, pensez à mettre une étoile au dépôt et à contribuer à son amélioration.