🔧Use MicroCMS with Nuxt3

MicroCMS

MicroCMS is a headless CMS, developed in Japan.

install

npm install microcms-js-sdk

package.json

{
  "devDependencies": {
    "nuxt": "3.0.0-rc.8"
  },
  "dependencies": {
    "microcms-js-sdk": "^2.2.1"
  }
}

.env

* is described on the MicroCMS screen.

MICROCMS_API_KEY=*
MICROCMS_SERVICE_DOMAIN=*

nuxt.config.json

const { MICROCMS_SERVICE_DOMAIN, MICROCMS_API_KEY } = process.env;

export default defineNuxtConfig({
  publicRuntimeConfig: {
    apiKey: "prerender" !== 'production' ? MICROCMS_API_KEY : undefined,
    serviceDomain: "prerender" !== 'production' ? MICROCMS_SERVICE_DOMAIN : undefined
  }
})

server/api/client.ts

import { createClient } from 'microcms-js-sdk';
const { MICROCMS_API_KEY, MICROCMS_SERVICE_DOMAIN } = process.env;

const client = createClient({
  serviceDomain: MICROCMS_SERVICE_DOMAIN,
  apiKey: MICROCMS_API_KEY,
});

export default client

server/api/type.ts

type Tag = {
  id: string,
  createdAt: string,
  updatedAt: string,
  publishedAt: string,
  revisedAt: string,
  name: string
}

export type Blog = {
  id: string,
  createdAt: string,
  updatedAt: string,
  publishedAt: string,
  revisedAt: string,
  title: string,
  tags: Tag[],
  description: string
  content: string,
}

server/api/blogs.ts

import type { IncomingMessage, ServerResponse } from 'http'
import client from './client'
import { Blog } from './types'

export default async (req: IncomingMessage, res: ServerResponse) => {
  const queries = {}
  const data = client.getList<Blog>({
    endpoint: 'blogs',
    queries: queries
  })

  return data
}

pages/index.vue

<script setup lang="ts">
const { data } = await useFetch('/api/blogs')
</script>

<template>
  <div class="p-5 text-site">
    {{ data }}
  </div>
</template>

server/api/blog.ts

import type { IncomingMessage, ServerResponse } from 'http'
import client from './client'
import { Blog } from './types'
import * as url from 'url'


export default async (req: IncomingMessage, res: ServerResponse) => {
  const params = url.parse(req.url as string, true).query;
  const slug = params.slug
  const data = client.getListDetail<Blog>({
    endpoint: 'blogs',
    contentId: String(slug)
  })
  return data
}

pages/[slug]/index.vue

<script setup lang="ts">
const route = useRoute()
const slug: string | string[] = route.params.slug;

const { data } = await useFetch(`/api/blog`, {
  params: { slug: String(slug) }
})
</script>


<template>
  <div>
    {{ slug }}
    {{ data }}
  </div>
</template>

If you want to see the communication on the frontend side
↓

<script setup lang="ts">
const route = useRoute()
const slug: string | string[] = route.params.slug;
const { data } = await useFetch(`/api/blog`, {
  params: { slug: String(slug) }
})

fetch(`https://${microcms_name}.microcms.io/api/v1/blogs/${slug}`, {
  headers: {
    "X-MICROCMS-API-KEY": ${your api key}
  }
})
</script>

<template>
  <div>
    {{ data }}
  </div>
</template>

Ref.

https://blog.microcms.io/nuxt3-create-blog/