Se você procura um modelo inicial de blog moderno para Nuxt 3, o Bfotool Nuxtjs Base Blog é uma excelente solução. Trata-se de um aplicativo de blog totalmente funcional, construído com Nuxt 3, Vue 3, TypeScript e Tailwind CSS, projetado para ajudar desenvolvedores a criar rapidamente um blog profissional sem a necessidade de um backend durante o desenvolvimento.
O projeto inclui uma camada de API simulada, alimentada por interceptores Axios, que simula uma API REST real. Isso o torna perfeito para aprender a arquitetura Nuxt, prototipar aplicativos ou construir plataformas de blog prontas para produção.
Você pode explorar o repositório aqui: 👉 https://github.com/bfotool/nuxtjs-base-blog
O que é o Bfotool Nuxtjs Base Blog?
O Bfotool Nuxtjs Base Blog é um modelo de aplicativo de blog moderno, construído com as mais recentes tecnologias de front-end. Ele oferece uma interface completa para blogs, com posts, categorias, funcionalidade de busca e páginas de contato.
O projeto foi desenvolvido com uma arquitetura Nuxt 3 limpa, o que facilita sua compreensão e extensão.
Os principais destaques incluem:
Interface completa de blog com design responsivo
API REST simulada para desenvolvimento sem backend
Construído com a moderna API de composição do Vue 3.
Desenvolvimento com segurança de tipos usando TypeScript
Configuração de metadados otimizada para SEO
Suporte para temas claros e escuros
O repositório pode ser encontrado aqui:
👉 https://github.com/bfotool/nuxtjs-base-blog
Este modelo é ideal para:
Blogs pessoais
Blogs da empresa
Portfólios de desenvolvedores
Aprendendo arquitetura Nuxt 3
Prototipagem rápida de sites de conteúdo
Principais características
Páginas de blog completas
O modelo inclui um conjunto completo de páginas normalmente necessárias em uma plataforma de blog.
As páginas principais incluem:
Página inicial – Exibe uma publicação principal em destaque, filtros de categoria e publicações paginadas.
Página da publicação no blog – Visualização do artigo completo com sumário e publicações relacionadas.
Página de categoria – Navegue pelas publicações filtradas por categoria
Página de pesquisa – Pesquisa em tempo real com funcionalidade de debounce
Página "Sobre nós" – Apresente sua equipe, missão ou marca.
Página de contato – Formulário de contato com validação e notificação de feedback.
Página de erro – Interface de usuário personalizada para tratamento de erros
Essa estrutura oferece uma experiência de blog pronta para uso aos usuários.
< class="ac-h3"h3>Camada de API falsa para desenvolvimento
Uma das funcionalidades mais poderosas deste projeto é o sistema de API simulada .
Em vez de se conectar a um backend real, o projeto simula respostas de API usando interceptores Axios .
Essa abordagem permite que os desenvolvedores:
Crie funcionalidades de front-end sem dependências de back-end.
Teste de paginação, filtragem e ordenação.
Simule atrasos reais nas respostas da API.
Mais tarde, você poderá facilmente migrar para um backend real.
A API simulada inclui endpoints como:
/posts/posts/featured/posts/:slug/categories/authors/contact
Como a API é abstraída por meio do componente useApi, a troca para um backend real requer configuração mínima.
Arquitetura Moderna Nuxt 3
O projeto segue os padrões de desenvolvimento recomendados para o Nuxt 3, tornando-se uma ótima referência para desenvolvedores que estão aprendendo o framework.
Características arquitetônicas importantes incluem:
Componentes e elementos compostos importados automaticamente
Desenvolvimento com TypeScript como prioridade
Camada de serviço de API componível
Estrutura de pastas modular
Configuração de metadados SEO
Transições de página
O aplicativo também utiliza:
useSeoMeta()para tags de SEOuseColorMode()para troca de temauseRoute()e outros componentes Nuxt integrados
< class="ac-h3"h3>Modo escuro e design responsivo
A interface do usuário suporta temas claros e escuros usando @nuxtjs/color-mode.
As funcionalidades incluem:
Detecção automática do tema do sistema
Alternância manual de tema
Estilização CSS do Tailwind
Layout responsivo com foco em dispositivos móveis
Isso garante que o blog funcione perfeitamente em todos os dispositivos:
Área de trabalho
Comprimidos
Dispositivos móveis
P class="ac-h3"poderes do blog
O modelo de blog inclui diversos recursos avançados normalmente encontrados em plataformas de blog de produção.
Isso inclui:
Sumário gerado a partir de títulos em Markdown
Sugestões de posts relacionados
Tempo estimado de leitura
Filtragem por categoria
Pesquisa de texto completo sem ruído
Paginação inteligente
notificações pop-up
Carregando componentes do esqueleto
Transições de página animadas
Esses recursos criam uma experiência de leitura moderna para os visitantes do blog.
Conjunto de tecnologias
O projeto foi construído utilizando uma pilha de front-end moderna.
| Camada | Tecnologia |
|---|---|
| Estrutura | Nuxt 3.15 |
| Biblioteca de interface do usuário | Vue 3.5 |
| Linguagem | TypeScript 5.7 |
| Estilização | Tailwind CSS 3.4 |
| Gestão Estadual | Pinia |
| Cliente HTTP | Axios |
| Ícones | Iconify via @nuxt/icon |
| Tema | @nuxtjs/modo-de-cor |
| fiapos | ESLint |
| Formatação | Mais bonita |
Essa pilha de tecnologias oferece desempenho, escalabilidade e facilidade de manutenção .
Visão geral da estrutura do projeto
O repositório segue uma estrutura limpa e organizada.
Os diretórios importantes incluem:
Páginas
O pagesdiretório define as rotas principais:
index.vue– Página inicialabout.vue– Página Sobrecontact.vue– Formulário de contatosearch.vue– Interface de pesquisablog/[slug].vue– Página de postagem do blogblog/category/[slug].vue– Página de categoria
Com class="ac-h3"ponents
Os componentes de interface do usuário reutilizáveis são agrupados em categorias lógicas:
layout– Cabeçalho e rodapécommon– Paginação, carregadores de esqueletos, notificações pop-upblog– Componentes específicos do blog, como cartões postais e índice.
Classe Comp="ac-h3"osables
O diretório `composables` contém lógica reutilizável.
Os elementos componíveis importantes incluem:
useApi()– Camada de serviço de API tipadauseDebounce()– Valores reativos de debounce
< class="ac-h3"h3>Camada de API simulada
O sistema de simulação está localizado dentro do mocksdiretório.
Contém:
handlers.ts– Interceptadores de requisição de APIposts.ts– Exemplos de postagens de blogauthors.ts– Dados do autorcategories.ts– Dados de categoria
Essa estrutura facilita a modificação e a expansão do projeto .
Como instalar e executar o projeto
Siga estes passos para executar o projeto localmente.
Pré-requisito class="ac-h3"uisites
Você precisa de:
Node.js 18.17 ou posterior
npm, yarn ou pnpm
Clonar o repositório
git clone https://github.com/bfotool/nuxtjs-base-blog.git
cd nuxtjs-base-blog
class="ac-h3"Instalar dependências
npm install
Iniciar servidor de desenvolvimento
npm run dev
Em seguida, abra seu navegador em:
http://localhost:3000
O servidor de desenvolvimento Nuxt será recarregado automaticamente quando os arquivos forem alterados.
Transição da API simulada para a API real
Uma das melhores decisões de design neste projeto é a facilidade de troca de API .
Para conectar um backend real:
Defina a variável de ambiente:
NUXT_PUBLIC_USE_MOCK_API=false
Configure o URL base da sua API:
NUXT_PUBLIC_API_BASE_URL=https://your-api-server.com
Certifique-se de que a resposta do seu backend corresponda aos tipos definidos em:
types/index.ts
Não são necessárias alterações adicionais no código.
Personalizando o blog
Os desenvolvedores podem personalizar o modelo facilmente.
Alterar tema ou estilos
Editar a configuração do Tailwind:
tailwind.config.ts
Os estilos globais estão localizados em:
assets/css/main.css
Modificar conteúdo do blog
O conteúdo fictício pode ser atualizado em:
mocks/posts.ts
mocks/categories.ts
mocks/authors.ts
Isso permite que você crie protótipos de diferentes conjuntos de dados de blogs rapidamente.
Atualizar configurações do aplicativo
Constantes da aplicação, como navegação, identidade visual e links para redes sociais, são armazenadas em:
utils/constants.ts
Por que usar este modelo de blog Nuxt?
Este projeto é uma ótima opção para desenvolvedores porque oferece:
Arquitetura Nuxt 3 limpa
Estrutura de código em nível de produção
API simulada para desenvolvimento de front-end
Interface de usuário moderna com Tailwind CSS
Páginas otimizadas para SEO
Fácil integração com APIs reais
Ele funciona tanto como um projeto de aprendizado quanto como uma base de blog pronta para produção .
Repositório GitHub
Você pode explorar o código-fonte completo aqui: 👉 https://github.com/bfotool/nuxtjs-base-blog
Se você achar o projeto útil, considere adicionar uma estrela ao repositório e contribuir com melhorias.