この記事はNuxt 3のディレクトリ構成を対象にした実装記録です。
新規作成コマンドでv3テンプレートを指定し、Nuxt 4の初期構成と混在させないでください。
Jamstack、静的サイトの勉強としてNuxt3 + microCMSを触ってみました。
その備忘録です。
Nuxt3 + microCMSで基本的なサイトを作成する
Nuxt3でサイトを構築、さらにmicroCMSの内容を表示するところまで作成してみます。
Nuxtの初期環境構築
npmやNode .js、git等のツールの導入は省きます。
必要なものを事前に入れておいてください。
ちなみに自分の環境はMacです。
Nuxtの公式サイトに沿って進めます。
cd Documents最後に初期状態を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-modulepackage.jsonに以下が記載されていればOKです。
"nuxt-microcms-module": "^3.0.2",
envの作成
.envというファイルを作成して、microCMSに取得したいドメイン名と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への接続設定です。APIキーの非公開性は、使用するモジュールのバージョンと出力を確認して判断します。
記事リストの作成
試しにトップページに記事リストを表示してみましょう。
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 :to="`/news/${news.id}`">
{{ news.title }}
</NuxtLink>
</li>
</ul>
</template>確認しましょう。
お知らせ詳細ページの作成
Pagesフォルダにnewsというフォルダを作成。
そこにindex.vueファイルを作成します。
トップページ
pages > index.vue
前項で表示させたお知らせ一覧は消して、リンクだけ作成しました。
<template>
<div>
トップページ
<NuxtLink 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 :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: newsDatail } = await useMicroCMSGetListDetail<News>({
endpoint: 'news',
contentId: contentId,
queries: { fields: ['id', 'publishedAt', 'title', 'content'] },
})
</script>
<template>
<div>
{{ newsDatail?.title }}
{{ newsDatail?.publishedAt }}
<div v-html="newsDatail?.content" />
</div>
</template>
確認します。
お知らせ一覧
お知らせ詳細
という感じでmicroCMSで作成したお知らせ記事を表示できました！
見た目を変更する
SCSSで見た目を調整していきます。
NuxtのSCSSを設定します。
公式サイトから下記のコマンドをターミナルで実行します。
npm install -D sasspackage.jsonに以下が記載されていればOKです。
"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や通信にキーが含まれないことを確認します。
今回の修正では実microCMS接続と本番ビルドの検証は済んでいません。
戻す場合は変更前のファイルとロックファイルへ戻します。
作成コマンドの参照：Nuxt 3公式インストール手順。
