Nuxt3-microCMS Blog Template

デモサイト

Nuxt3 + microCMS + Vuetify3で作られたブログテンプレートです。

Use this templateから自分のリポジトリを作って利用します。

Functions

• Nuxt3
• MicroCMS
• Vuetify3
• SSR
• Volar
• TypeScript
• Prettier/Eslint
• Husky
• GA4
• OGP

How to use

1. Use this template

• このリポジトリのページ上にあるUse this templateをクリック
• repository name, description, Public/Privateを設定
• Create repository from templateをクリック

2. Setup microCMS

• microCMS の公式ページからアカウントを作成
• microCMSにログインし、以下のテーブルのようにサービスを作成

サービス名	サービスID
任意	任意

• microCMSで以下のテーブルのようにAPIの作成（microCMSにはAPIインターフェースのインポート機能があるので、APIの型を設定したのち、以下のテーブルのインポートファイルの欄にあるファイルを使用してください）

API名	エンドポイント	APIの型	インポートファイル
任意（例：サイト情報）	base-info	オブジェクト形式	api-base-info.json
任意（例：ブログ）	blog	リスト形式	api-blog.json

• 前手順で作成したAPIスキーマに従ってサイト情報やブログコンテンツを作成

3. Environment variables (local environment)

• .env.templateをコピーし、.envを作成
• BASE_URLを上記の手順で作成したmicroCMSのサービスIDに、API_KEYをAPIキーに設定

4. Install packages

パッケージをインストール

yarn install

5. Development

ローカル環境での動作確認

yarn dev

6. Production

本番モードでの動作確認

yarn build

7. Environment variables (server environment)

Netfilyでの環境変数の設定

• NetlifyのDeploy設定のEnvironment variablesセクションに手順3と同様の環境変数を設定

key	value
BASE_URL	[サービスID]
API_KEY	[APIキー]

8. Deploy

• Githubのリポジトリに更新があると自動的にNetlifyにデプロイ

9. Google Analytics

Optional

• Google Analyticsの管理画面でGA4を設定
• 上記で設定したGA4のIDを環境変数GTAGに設定