kawa-work / nuxt3-microcms-blog Goto Github PK

View Code? Open in Web Editor NEW

6.0 2.0 0.0 698 KB

A Nuxt3 blog template with microCMS + Vuetify3

License: MIT License

JavaScript 5.23% Vue 48.49% TypeScript 41.11% SCSS 4.61% Shell 0.57%

template typescript vue vue3 nuxt nuxt3 vuetify vuetify3 microcms volar

nuxt3-microcms-blog's Introduction

Nuxt3-microCMS Blog Template

デモサイト

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

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

Functions

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に設定

nuxt3-microcms-blog's People

Contributors

Stargazers

Watchers

nuxt3-microcms-blog's Issues

There is no active component instance when onServerPrefetch is called

Problem

The following error is displayed in server console.

[Vue warn]: onServerPrefetch is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.