この記事はNuxt 3のディレクトリ構成を対象にした過去の学習・実装記録です。Nuxt 3は2026年7月31日で通常サポートが終了しています。新しい公開サイトは、Nuxt公式のサポート状況を確認し、サポート中の版で構築してください。
旧構成をローカルで学習する場合だけv3テンプレートを指定します。以下は開発サーバーで一覧と詳細を表示する例で、静的書き出しや本番配信、Nuxt 4への移行まで検証した手順ではありません。
Jamstack、静的サイトの勉強としてNuxt3 + microCMSを触ってみました。
その備忘録です。
Nuxt3 + microCMSで基本的なサイトを作成する
Nuxt3でサイトを構築、さらにmicroCMSの内容を表示するところまで作成してみます。
Nuxtの初期環境構築
npmやNode .js、git等のツールの導入は省きます。
必要なものを事前に入れておいてください。
ちなみに自分の環境はMacです。
以下はMacのDocuments内に新しい学習用フォルダを作る例です。Node.jsの要件を公式で確認し、作成時のパッケージ管理にはnpmを選びます。作成後は依存関係をインストールして起動し、ターミナルに表示されたURLを開きます。
cd ~/Documents
npm create nuxt@latest nuxt3-microcms-study -- -t v3
cd nuxt3-microcms-study
npm install
npm run dev最後に初期状態をgitでコミットしておきましょう。
トップページの作成
app.vueのファイルを開きます。
初期画面の表示を消して、ページを表示するように書きます。
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>次にpagesというフォルダを作成して、index.vueというファイルを作成します。
<template>
<div>
テスト！
</div>
</template>表示を確認しましょう。
ヘッダーとフッターの作成
まずはlayoutsというフォルダを作成して、default.vueを作成します。
<template>
<div>
<TheHeader />
<slot />
<TheFooter />
</div>
</template>ここでヘッダー（TheHeader）とフッター（TheFooter）を作成していきます。
componentsというフォルダを作成して、TheHeader.vueというファイルを作成します。
<template>
<header>
ヘッダーだよ！
</header>
</template>同じくフッター（TheFooter.vue）も作ります。
<template>
<footer>
フッターだよ！
</footer>
</template>確認しましょう。
microCMSで作成したお知らせを表示する
CMS（microCMS）も入れたかったので、表示させてみます。
microCMSのアカウントを作成
microCMSのアカウントを作成して、APIキーを取得しておきます。
お知らせはチュートリアルガイドに従って記事を作成しておきましょう。
nuxt-microcms-moduleの導入
NuxtとmicroCMSを繋ぐための公式プラグインがあるので導入します。
VSCodeのターミナルで以下を実行
npm install nuxt-microcms-module以下のpackage.json断片は当時の導入例です。実際に入ったバージョンはnpm lsとロックファイルで確認し、現在のインストール結果がこの番号になるとは考えないでください。
"nuxt-microcms-module": "^3.0.2",
envの作成
.envにはサービスID（XXXX.microcms.ioのXXXX部分）と、学習用コンテンツの読み取り専用APIキーを設定します。本番や非公開情報にアクセスできるキーは、この旧構成の検証に使わないでください。
MICRO_CMS_DOMAIN = ドメイン名
MICRO_CMS_API_KEY = APIキーnuxt.config.tsに以下のコードを記載します。
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: '2024-04-03',
devtools: { enabled: true },
modules: [
[
'nuxt-microcms-module',
{
serviceDomain: process.env.MICRO_CMS_DOMAIN,
apiKey: process.env.MICRO_CMS_API_KEY,
},
],
],
});microCMSへの接続設定です。掲載当時のモジュール3.0.2は、開発モードではAPIキーをpublic runtimeConfigへ入れる実装です。3.0.2のソースで確認できます。target: serverでも開発時のキー非公開は保証されません。本番用キーは使わず、共有公開しないローカルの学習環境に限定してください。新しい版では仕様を改めて確認します。
記事リストの作成
試しにトップページに記事リストを表示してみましょう。
index.vueを編集します。
APIのエンドポイントをnewsにし、title（テキスト）とcontent（リッチエディタ）を作り、テスト記事を公開しておきます。一覧ではid・公開日・タイトルを取得し、タイトルを表示します。次の例にはページ送りがないため、全件取得には別途limitとoffsetの実装が必要です。
<script setup lang="ts">
type News = {
id: string,
publishedAt: string,
title: string;
};
const { data: newsList } = await useMicroCMSGetList<News>({
endpoint: 'news',
queries: { fields: ['id', 'publishedAt', 'title'] },
});
</script>
<template>
<ul>
<li v-for="news in newsList?.contents" :key="news.id">
<NuxtLink external :to="`/news/${news.id}`">
{{ news.title }}
</NuxtLink>
</li>
</ul>
</template>確認しましょう。
お知らせ詳細ページの作成
小文字のpagesフォルダにnewsというフォルダを作成します。
そこにindex.vueファイルを作成します。
トップページ
pages > index.vue
前項で表示させたお知らせ一覧は消して、リンクだけ作成しました。
<template>
<div>
トップページ
<NuxtLink external to="/news">
お知らせ一覧へ
</NuxtLink>
</div>
</template>お知らせの一覧ページ
pages > news > index.vue
前項で作成したお知らせ一覧はこちらで表示します。
<script setup lang="ts">
type News = {
id: string,
publishedAt: string,
title: string
}
const { data: newsList } = await useMicroCMSGetList<News>({
endpoint: 'news',
queries: { fields: ['id', 'publishedAt', 'title'] },
})
</script>
<template>
<ul>
<li v-for="news in newsList?.contents" :key="news.id">
<NuxtLink external :to="`/news/${news.id}`">
{{ news.title }}
</NuxtLink>
</li>
</ul>
</template>newsフォルダのindex.vueと同じ階層に[id].vueというファイルを作成して、以下のコードを記載します。
お知らせ詳細
pages > news > [id].vue
<script setup lang="ts">
const route = useRoute()
const contentId = route.params.id.toString()
type News = {
id: string,
publishedAt: string,
title: string,
content: string
}
const { data: newsDetail } = await useMicroCMSGetListDetail<News>({
endpoint: 'news',
contentId: contentId,
queries: { fields: ['id', 'publishedAt', 'title', 'content'] },
})
</script>
<template>
<div>
{{ newsDetail?.title }}
{{ newsDetail?.publishedAt }}
<div v-html="newsDetail?.content" />
</div>
</template>
詳細のv-htmlはCMSのHTMLを描画するため、編集権限を持つ信頼できる人が管理した内容だけを対象にします。不特定ユーザーの入力をそのまま流さないでください。Vue公式のHTML描画に関する注意点も確認します。
お知らせ一覧
お知らせ詳細
という感じでmicroCMSで作成したお知らせ記事を表示できました！
見た目を変更する
SCSSで見た目を調整していきます。
NuxtのSCSSを設定します。
公式サイトから下記のコマンドをターミナルで実行します。
npm install -D sass以下のpackage.json断片は当時の導入例です。実際に入ったバージョンはnpm lsとロックファイルで確認し、現在のインストール結果がこの番号になるとは考えないでください。
"devDependencies": {
"sass": "^1.79.5"
}main.scssの作成
assetsフォルダを作成、さらにその中にscssフォルダを作成します。
scssフォルダの中にmain.scssを作成します。
nuxt.config.ts
css: ['~/assets/scss/main.scss']の記述を追加
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: '2024-04-03',
devtools: { enabled: true },
modules: [
[
'nuxt-microcms-module',
{
serviceDomain: process.env.MICRO_CMS_DOMAIN,
apiKey: process.env.MICRO_CMS_API_KEY,
},
],
],
css: ['~/assets/scss/main.scss']
});固有のCSSはそれぞれの.vueファイルの中に書きます。
例えばヘッダーを赤くしたい時はTheHeader.vueの最後に下記のコードを追加します。
<style lang="scss" scoped>
header {
background: red;
}
</style>scopedと書いてあるので、そこだけにSCSSが適応されます。
基本的なことは以上です。
この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。
一覧から詳細へ移動できるか確認する
一覧ではリンク生成に使うidをfieldsへ含め、リンク先を/news/記事IDに揃えます。
publishedAtはJSONでは日付文字列なので、TypeScript型はstringとして受け取り、日付計算をするときだけDateへ変換します。
開発サーバーのポートが使用中なら別のポートになるため、ターミナルに表示されたURLを開いてください。
空の一覧、存在しないID、APIエラー、詳細ページの直接再読み込みも複製環境で確認します。
APIキーは読み取り対象を必要なAPIへ限定し、ブラウザーへ配信するJavaScriptや通信にキーが含まれないことを確認します。
今回の修正では公式資料とモジュール3.0.2のソースを照合しました。実microCMS接続、本番ビルド、静的生成、エラー時の表示は未検証です。掲載コードだけで本番運用に必要な処理が揃うわけではありません。
戻す場合は変更前のファイルとロックファイルへ戻します。
作成コマンドの参照：Nuxt 3公式インストール手順。
よくある質問：Nuxt3 + microCMSで基本的なサイトを作る方法
この記事は、どんな内容ですか？
記事では、Jamstack、静的サイトの勉強としてNuxt3 + microCMSを触った実装記録です。Nuxt3でサイトを構築し、さらにmicroCMSの内容（お知らせ）を表示するところまで作成しています。
Nuxt 4でも、そのまま使えますか？
そのままの適用は対象外です。この記事は通常サポートを終了したNuxt 3の学習記録で、新規の公開サイトにはサポート中の版を選びます。v3指定は旧構成をローカルで確認するためのものです。
サイトは、どんな順で作りますか？
記事では、Nuxtの初期環境構築（npmやNode.js、git等の導入は省略、環境はMac）、トップページの作成（app.vueを編集し、pagesフォルダにindex.vueを作成）、ヘッダーとフッターの作成（layoutsにdefault.vue、componentsにTheHeader.vueとTheFooter.vue）、microCMSで作成したお知らせの表示、見た目の変更（SCSS）、の順に進めます。作業の区切りごとにgitでコミットしておきます。
microCMSの接続は、どう設定しますか？
記事では、microCMSのアカウントを作成してAPIキーを取得し、.envファイルに取得したいドメイン名とAPIキーを入れ、nuxt.config.tsに接続設定を記載します。APIキーはgitに上げないように対策しましょう。
APIキーは、ブラウザーから見えませんか？
掲載当時の3.0.2では開発モードの公開設定へキーが入るため、ブラウザーから見えないとはいえません。学習用の読み取り専用キーでローカル確認する範囲に限定します。APIキーは読み取り対象を必要なAPIへ限定し、ブラウザーへ配信するJavaScriptや通信にキーが含まれないことを確認します。
一覧から詳細ページへのリンクは、どう作りますか？
記事では、pages/newsにindex.vue（一覧）とidを使う動的な詳細ページのファイルを作成します。一覧ではリンク生成に使うidをfieldsへ含め、リンク先を/news/記事IDに揃えます。publishedAtはJSONでは日付文字列なので、TypeScript型はstringとして受け取り、日付計算をするときだけDateへ変換します。
確認すべきことと、検証の範囲は？
記事では、開発サーバーのポートが使用中なら別のポートになるため、ターミナルに表示されたURLを開いてください。空の一覧、存在しないID、APIエラー、詳細ページの直接再読み込みも複製環境で確認します。今回の修正では公式資料とモジュール3.0.2のソースを照合しました。実microCMS接続、本番ビルド、静的生成、エラー時の表示は未検証です。掲載コードだけで本番運用に必要な処理が揃うわけではありません。戻す場合は変更前のファイルとロックファイルへ戻します。ツールの仕様は変わる可能性があるため、最新は公式で確認してください。
