Шаблон блога на основе Nuxt 3 – Bfotool Nuxtjs Base Blog(Vue 3 + TypeScript + Tailwind)

Если вы ищете современный стартовый шаблон для блога на Nuxt 3, Bfotool Nuxtjs Base Blog — отличное решение. Это полнофункциональное приложение для блога, созданное с использованием Nuxt 3, Vue 3, TypeScript и Tailwind CSS, разработанное для того, чтобы помочь разработчикам быстро создать профессиональный блог без необходимости разработки бэкэнда.

Проект включает в себя слой фиктивного API, работающий на основе перехватчиков Axios, который имитирует реальный REST API. Это делает его идеальным для изучения архитектуры Nuxt, прототипирования приложений или создания готовых к использованию платформ для блогов.

Вы можете ознакомиться с репозиторием здесь: 👉 https://github.com/bfotool/nuxtjs-base-blog

Что такое базовый блог Bfotool Nuxtjs?

Bfotool Nuxtjs Base Blog — это современный шаблон приложения для блога, созданный с использованием новейших фронтенд-технологий. Он предоставляет полноценный интерфейс для ведения блога с постами, категориями, функцией поиска и страницами контактов.

Проект разработан с использованием чистой архитектуры Nuxt 3, что делает его простым для понимания и расширения.

К основным моментам относятся:

Полноценный пользовательский интерфейс блога с адаптивным дизайном.
Имитация REST API для разработки без бэкенда.
Создано с использованием современного Vue 3 Composition API.
Типобезопасная разработка с использованием TypeScript
SEO-оптимизированная мета-конфигурация
Поддержка темной и светлой тем оформления.

Репозиторий можно найти здесь:

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

Этот шаблон идеально подходит для:

Личные блоги
Блоги компаний
Портфолио разработчиков
Изучение архитектуры Nuxt 3
Быстрое прототипирование контентных веб-сайтов

Основные характеристики

C class="ac-h3"omplete Blog Pages

Шаблон включает в себя полностью реализованный набор страниц, обычно необходимых для блог-платформы.

Основные страницы включают:

Главная страница — отображает главный пост, фильтры по категориям и постраничную навигацию по записям.
Страница записи в блоге – просмотр статьи целиком с оглавлением и ссылками на похожие публикации.
Страница категории – Просмотр записей, отфильтрованных по категории
Страница поиска – поиск в реальном времени с функцией подавления задержек.
Страница «О нас» — представьте свою команду, миссию или бренд.
Страница контактов – форма обратной связи с проверкой данных и всплывающим уведомлением.
Страница ошибки – Настраиваемый интерфейс обработки ошибок

Эта структура обеспечивает пользователям готовый к использованию интерфейс блога .

< class="ac-h3"h3>Фальшивый API-слой для разработки</ class>

Одной из самых мощных особенностей этого проекта является система имитации API .

Вместо подключения к реальному бэкэнду проект имитирует ответы API с помощью перехватчиков Axios .

Такой подход позволяет разработчикам:

Создавайте функциональные возможности фронтенда без зависимостей от бэкенда.
Протестируйте пагинацию, фильтрацию и сортировку.
Имитация реальных задержек ответа API
Позже легко можно будет переключиться на полноценную серверную часть.

Имитационный API включает в себя такие конечные точки, как:

/posts
/posts/featured
/posts/:slug
/categories
/authors
/contact

Поскольку API абстрагирован с помощью составного объекта useApi, переход на реальный бэкэнд требует минимальной настройки.

Современная архитектура Nuxt 3

Проект соответствует рекомендованным шаблонам разработки Nuxt 3, что делает его отличным справочным материалом для разработчиков, изучающих этот фреймворк.

К важным архитектурным особенностям относятся:

Автоматически импортируемые компоненты и компонуемые элементы
Разработка с приоритетом TypeScript
Компонуемый слой API-сервисов
Модульная структура папок
SEO мета-конфигурация
Переходы между страницами

Приложение также использует:

useSeoMeta()для SEO-тегов
useColorMode()для переключения тем
useRoute()и другие встроенные компоненты Nuxt.

< class="ac-h3"h3>Темный режим и адаптивный дизайн</ class>

Пользовательский интерфейс поддерживает темную и светлую темы с помощью @nuxtjs/color-mode.

В число функций входят:

Автоматическое определение темы оформления системы
Ручное переключение темы
CSS-стили для Tailwind
Адаптивный дизайн, ориентированный на мобильные устройства.

Это гарантирует бесперебойную работу блога на следующих платформах:

Рабочий стол
Таблетки
Мобильные устройства

P class="ac-h3"Мощные функции блога

Шаблон блога включает в себя несколько расширенных функций, обычно встречающихся в готовых платформах для ведения блогов.

К ним относятся:

Оглавление, сгенерированное на основе заголовков в формате Markdown.
Предложения по похожим постам
Примерное время чтения
Фильтрация по категориям
Поиск по полному тексту с ошибкой
Интеллектуальная пагинация
Всплывающие уведомления
Загрузка компонентов скелета
Анимированные переходы между страницами

Эти функции создают современный опыт чтения для посетителей блога.

Технологический стек

Проект разработан с использованием современного фронтенд-стека.

Слой	Технологии
Рамки	Nuxt 3.15
Библиотека пользовательского интерфейса	Vue 3.5
Язык	TypeScript 5.7
Стиль	Tailwind CSS 3.4
Государственное управление	Пиния
HTTP-клиент	Аксиос
Иконки	Iconify через @nuxt/icon
Тема	@nuxtjs/color-mode
Ворсинки	ESLint
Форматирование	Прекраснее

Этот стек обеспечивает производительность, масштабируемость и удобство сопровождения .

Обзор структуры проекта

Репозиторий имеет чистую и организованную структуру.

Важные каталоги включают в себя:

Страницы

В этом pagesкаталоге определены основные маршруты:

index.vue– Главная страница
about.vue– Страница «О нас»
contact.vue– Форма обратной связи
search.vue– Интерфейс поиска
blog/[slug].vue– Страница записи в блоге
blog/category/[slug].vue– Страница категории

Com class="ac-h3"ponents

Многократно используемые компоненты пользовательского интерфейса сгруппированы в логические категории:

layout– Верхний и нижний колонтитулы
common– Пагинация, скелетные индикаторы загрузки, всплывающие уведомления
blog– Компоненты, специфичные для блога, такие как открытки и оглавление.

Comp class="ac-h3"osables

В каталоге composables содержится многократно используемая логика.

К числу важных компонентов относятся:

useApi()– Типизированный API-сервисный уровень
useDebounce()– Отключение дребезга реактивных значений

< class="ac-h3"h3>Имитационный слой API

Имитационная система находится внутри mocksкаталога.

В его состав входит:

handlers.ts– Перехватчики запросов API
posts.ts– Примеры постов в блоге
authors.ts– Данные автора
categories.ts– Данные по категориям

Такая структура упрощает модификацию и расширение проекта .

Как установить и запустить проект

Выполните следующие шаги, чтобы запустить проект локально.

Prereq class="ac-h3"uisites

Вам потребуется:

Node.js 18.17 или более поздняя версия
npm, yarn или pnpm

Клонируйте репозиторий

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

class="ac-h3"Установить зависимости

npm install

Запуск сервера разработки

npm run dev

Затем откройте браузер по адресу:

http://localhost:3000

Сервер разработки Nuxt будет автоматически перезагружаться при изменении файлов.

Переход от фиктивного API к реальному API

Одним из лучших проектных решений в этом проекте является простой переход на другой API .

Для подключения реального бэкэнда:

Установите переменную среды:

NUXT_PUBLIC_USE_MOCK_API=false

Настройте базовый URL-адрес вашего API:

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

Убедитесь, что ответ вашей серверной части соответствует типам, определенным в:

types/index.ts

Никаких дополнительных изменений в коде не требуется.

Настройка блога

Разработчики могут легко настроить шаблон.

Изменить тему или стили

Отредактируйте конфигурацию попутного ветра:

tailwind.config.ts

Глобальные стили расположены в:

assets/css/main.css

Изменить содержимое блога

Имитацию контента можно обновить в:

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

Это позволяет быстро создавать прототипы различных наборов данных для блогов.

Обновить настройки приложения

Константы приложения, такие как навигация, фирменная символика и ссылки на социальные сети, хранятся в:

utils/constants.ts

Почему стоит использовать этот шаблон блога Nuxt?

Этот проект — отличный выбор для разработчиков, поскольку он предоставляет:

Чистая архитектура Nuxt 3
Структура кода на уровне производства
Имитация API для фронтенд-разработки
Современный пользовательский интерфейс с использованием Tailwind CSS
SEO-оптимизированные страницы
Простая интеграция с реальными API.

Он подходит как для обучения, так и в качестве готовой к использованию основы для блога .

Репозиторий GitHub

Полный исходный код можно посмотреть здесь: 👉 https://github.com/bfotool/nuxtjs-base-blog

Если вы считаете проект полезным, поставьте репозиторию звездочку и внесите свой вклад в его улучшение.