Nuxt3でHeadlessCMS

はじめに

HeadlessCMSを試してみたくなりました。
Headとなる部分は簡単に導入できそうなNuxtにしました。
サイトをみたらちょうどNuxt3がRCでていたので、それでやりました。

HeadlessCMS

MicroCMSを使いました。NuxtのライブラリはありますがNuxt3には対応していなかったので、APIを直接叩くようにしました。
アカウントを登録して、APIの作成でブログを選択しました。
このブログを表示してみます。

APIを叩くと以下のような情報が得られます。

{
    "id": "xxxxxx",
    "createdAt": "2022-05-09T23:20:02.291Z",
    "updatedAt": "2022-05-09T23:20:02.291Z",
    "publishedAt": "2022-05-09T23:20:02.291Z",
    "revisedAt": "2022-05-09T23:20:02.291Z",
    "title": "（サンプル）まずはこの記事を開きましょう",
    "content": "<h2 id=\"hdb41525ba7\">ブログテンプレートから作成されました🎉</h2><p>ブログテンプレートからAPIを作成しました。<br>おつかれさまでした🎉<br></p><h2 id=\"hf45076424a\">APIプレビューを試そう🚀</h2><p>最初に「APIプレビュー」をしてみましょう。<br>入稿したコンテンツはAPI経由で取得し、Viewに繋ぎ込みます。<br>APIプレビューでは実際のAPIレスポンスを確認でき、あなたの開発を加速させます。<br><br>👇まずはここをクリックします。<br><img src=\"https://images.microcms-assets.io/assets/5c9a7d5656a14f31ac55a9d80a7504a6/d6cb8a0e41ba4cbfa8b13fddb0131acd/blog-template-description1.png\" alt=\"\"><br><br>APIプレビュー画面が開いたら、<strong>「取得」</strong>ボタンでリクエストを試してみましょう。<br><img src=\"https://images.microcms-assets.io/assets/5c9a7d5656a14f31ac55a9d80a7504a6/0ab51daa2a7f49ae9dc1987058b37bff/blog-template-description2.png\" alt=\"\"><br><br>この記事の内容がAPIで取得できていることがわかります。<br><img src=\"https://images.microcms-assets.io/assets/5c9a7d5656a14f31ac55a9d80a7504a6/72a70e2325ac43dd8c0f7b4a6d0448ee/blog-template-description3.png\" alt=\"\"></p><h2 id=\"h4c50a0f1e5\"><br>次にやること🏃‍♂️</h2><p>APIプレビューで確認したレスポンスを参考に、あなた自身のWebサイトを構築しましょう。<br>microCMSはAPIでコンテンツを取得するため、お好きな言語・フレームワークで画面を構築できます。<br></p><ul><li><a href=\"https://document.microcms.io/tutorial/javascript/javascript-top\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript SDK</a></li><li><a href=\"https://document.microcms.io/tutorial/nuxt/nuxt-top\" target=\"_blank\" rel=\"noopener noreferrer\">Nuxt SDK</a></li><li><a href=\"https://document.microcms.io/tutorial/gatsby/gatsby-top\" target=\"_blank\" rel=\"noopener noreferrer\">Gatsby SDK</a></li></ul><p><br>その他に<a href=\"https://microcms.io/features/sdk\" target=\"_blank\" rel=\"noopener noreferrer\">サーバーサイドSDK（PHP / Go / Ruby）やモバイルSDK（iOS / Android）</a>もございます。<br><br>お困りなことや疑問点などございましたらお気軽にご連絡ください。<br><br>サポート窓口：<a href=\"mailto:[e-mail]\" target=\"_blank\" rel=\"noopener noreferrer\">[e-mail]</a><br>よくある質問：<a href=\"https://help.microcms.io/ja/knowledge\" target=\"_blank\" rel=\"noopener noreferrer\">https://help.microcms.io/ja/knowledge</a></p>",
    "eyecatch": {
        "url": "https://images.microcms-assets.io/assets/5c9a7d5656a14f31ac55a9d80a7504a6/af1d1847e5894ae89003257195a47cf4/blog-template-example.png",
        "height": 630,
        "width": 1200
    },
    "category": {
        "id": "xxxxx",
        "createdAt": "2022-05-09T23:20:00.300Z",
        "updatedAt": "2022-05-09T23:20:00.300Z",
        "publishedAt": "2022-05-09T23:20:00.300Z",
        "revisedAt": "2022-05-09T23:20:00.300Z",
        "name": "更新情報"
    }
}

アプリケーションの準備

普段はyarn使いなんですがNuxt3のRCでは動きませんでした。今回はnpmを使います。

npx nuxi init nuxt3-app
cd nuxt3-app
npm install
npm run dev

プログラム

まずTypescriptで型評価を厳しい目に設定します。

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    typescript: {
        strict: true
    }
})

デフォルトのページではなく、これから生成するページを表示できるように設定します。

app.vue

<template>
  <div>
    <NuxtPage/>
  </div>
</template>

ページを作成します。
useFetchを使うと簡単にAPIが呼び出せます。
Titleタグを使うとHTMLのヘッダーにあるtitleを書き換えられます。

pages/index.vue

<template>
  <Title>{{ data.title }}</Title>
  <div><img :src="data.eyecatch.url" /></div>
  <div v-html="data.content"></div>
</template>

<script setup>
  const { data } = await useFetch('https://xxxxx.microcms.io/api/v1/blogs/xxxxxxxxxx', {
  headers: {
    'X-MICROCMS-API-KEY': 'xxxxxxxxxx'
  }
})
</script>