Nuxt 3 ベースのブログテンプレート – Bfotool Nuxtjs ベースのブログ(Vue 3 + TypeScript + Tailwind)

モダンなNuxt 3ブログスターターテンプレートをお探しなら、Bfotool Nuxtjs Base Blogが最適です。Nuxt 3、Vue 3、TypeScript、Tailwind CSSで構築されたフル機能のブログアプリケーションで、開発中にバックエンドを必要とせずに、開発者がプロフェッショナルなブログを迅速に構築できるように設計されています。

このプロジェクトには、Axiosインターセプターを利用した擬似APIレイヤーが含まれており、実際のREST APIをシミュレートします。Nuxtアーキテクチャの学習、アプリケーションのプロトタイピング、本番環境対応のブログプラットフォームの構築に最適です。

リポジトリはこちらからご覧いただけます: 👉 https://github.com/bfotool/nuxtjs-base-blog

Bfotool Nuxtjs Base Blogとは何ですか?

Bfotool Nuxtjs Base Blogは、最新のフロントエンドテクノロジーを使用して構築されたモダンなブログアプリケーションテンプレートです。投稿、カテゴリー、検索機能、お問い合わせページなど、包括的なブログインターフェースを提供します。

このプロジェクトは、クリーンな Nuxt 3 アーキテクチャで設計されており、理解しやすく拡張しやすいです。

主なハイライトは次のとおりです。

レスポンシブデザインによる完全なブログUI
バックエンドなしの開発用のモックREST API
最新のVue 3 Composition APIを使用して構築
TypeScriptによる型安全な開発
SEO対応のメタ設定
ダークテーマとライトテーマのサポート

リポジトリは次の場所にあります:

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

このテンプレートは次の場合に最適です。

個人ブログ
企業ブログ
開発者ポートフォリオ
Nuxt 3 アーキテクチャの学習
コンテンツウェブサイトの迅速なプロトタイピング

主な特徴

C class="ac-h3"完全なブログページ

テンプレートには、ブログプラットフォームで通常必要とされる、完全に実装されたページのセットが含まれています。

メインページは次のとおりです:

ホームページ– 注目のヒーロー投稿、カテゴリフィルター、ページ分けされた投稿を表示します。
ブログ投稿ページ– 目次と関連投稿を含む記事全文表示
カテゴリーページ– カテゴリー別に絞り込んだ投稿を閲覧
検索ページ– デバウンス機能を備えたリアルタイム検索
Aboutページ– チーム、ミッション、ブランドを紹介する
お問い合わせページ– 検証とトーストフィードバックを備えたお問い合わせフォーム
エラーページ– カスタムエラー処理UI

この構造により、ユーザーはすぐに使用できるブログエクスペリエンスを利用できます。

< class="ac-h3"h3>開発用の偽のAPIレイヤー

このプロジェクトの最も強力な機能の 1 つは、モック API システムです。

このプロジェクトでは、実際のバックエンドに接続する代わりに、Axios インターセプターを使用して API 応答をシミュレートします。

このアプローチにより、開発者は次のことが可能になります。

バックエンドに依存しないフロントエンド機能の構築
ページ区切り、フィルタリング、並べ替えをテストする
実際のAPI応答遅延をシミュレートする
後で簡単に実際のバックエンドに切り替えることができます

モック API には次のようなエンドポイントが含まれます。

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

API はuseApi composableを通じて抽象化されるため、実際のバックエンドに切り替えるには最小限の構成が必要です。

モダンな Nuxt 3 アーキテクチャ

このプロジェクトは推奨される Nuxt 3 開発パターンに従っており、フレームワークを学習する開発者にとって優れたリファレンスとなります。

重要な建築上の特徴は次のとおりです。

自動インポートされたコンポーネントとコンポーザブル
TypeScriptファースト開発
コンポーザブルAPIサービス層
モジュラーフォルダ構造
SEOメタ設定
ページ遷移

アプリケーションでは以下も使用されます:

useSeoMeta()SEOタグ用
useColorMode()テーマ切り替え用
useRoute()およびその他の組み込みNuxtコンポーザブル

< class="ac-h3"h3>ダークモードとレスポンシブデザイン

UI は、を使用してダークテーマとライトテーマ@nuxtjs/color-modeをサポートします。

機能は次のとおりです:

自動システムテーマ検出
テーマの手動切り替え
Tailwind CSS スタイル
モバイルファーストのレスポンシブレイアウト

これにより、ブログが以下にわたってシームレスに機能することが保証されます。

デスクトップ
タブレット
モバイルデバイス

P class="ac-h3"強力なブログ機能

ブログテンプレートには、実稼働のブログプラットフォームに通常見られる高度な機能がいくつか含まれています。

これらには次のものが含まれます。

マークダウンの見出しから生成された目次
関連記事の提案
推定読書時間
カテゴリフィルタリング
デバウンスされた全文検索
スマートなページネーション
トースト通知
スケルトンコンポーネントの読み込み
アニメーション化されたページ遷移

これらの機能により、ブログ訪問者に最新の読書体験が提供されます。

テクノロジースタック

このプロジェクトは、最新のフロントエンドスタックを使用して構築されています。

層	テクノロジー
フレームワーク	ヌクスト 3.15
UIライブラリ	ヴュー3.5
言語	タイプスクリプト 5.7
スタイリング	テイルウィンド CSS 3.4
状態管理	ピニア
HTTPクライアント	アクシオス
アイコン	@nuxt/icon 経由の Iconify
テーマ	@nuxtjs/カラーモード
リンティング	ESLint
書式設定	もっときれい

このスタックは、パフォーマンス、スケーラビリティ、保守性を提供します。

プロジェクト構造の概要

リポジトリは、整理された整頓された構造に従います。

重要なディレクトリは次のとおりです:

ページ

ディレクトリpagesは主なルートを定義します。

index.vue– ホームページ
about.vue– Aboutページ
contact.vue– お問い合わせフォーム
search.vue– 検索インターフェース
blog/[slug].vue– ブログ投稿ページ
blog/category/[slug].vue– カテゴリーページ

Com class="ac-h3"コンポーネント

再利用可能な UI コンポーネントは、論理的なカテゴリにグループ化されます。

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– カテゴリデータ

この構造により、プロジェクトの変更や拡張が容易になります。

プロジェクトのインストールと実行方法

プロジェクトをローカルで実行するには、次の手順に従います。

前提条件 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への切り替え

このプロジェクトにおける最も優れた設計上の決定の 1 つは、簡単な API スイッチです。

実際のバックエンドを接続するには:

環境変数を設定します。

NUXT_PUBLIC_USE_MOCK_API=false

API ベース URL を構成します。

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

バックエンドの応答が、以下で定義されているタイプと一致していることを確認します。

types/index.ts

追加のコード変更は必要ありません。

ブログのカスタマイズ

開発者はテンプレートを簡単にカスタマイズできます。

テーマやスタイルを変更する

Tailwind の設定を編集します。

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 を使用したモダンな UI
SEO対応ページ
実際のAPIとの簡単な統合

これは学習プロジェクトとしても、本番環境に対応したブログ基盤としても機能します。

GitHubリポジトリ

完全なソースコードは、こちらでご覧いただけます: 👉 https://github.com/bfotool/nuxtjs-base-blog

プロジェクトが役に立つと思われる場合は、リポジトリにスターを付けて、改善に貢献することを検討してください。