This document outlines the steps to use microCMS with Nuxt.
If you are using microCMS from Nuxt for the first time, please try the steps below.

Prerequisites

• You will need Node.js and npm to develop with Nuxt. Please install them in your development environment.
• You must have completed the creation of a microCMS service. If you haven't done this, please refer to the document below.

Setting Up microCMS

First, let's create a simple API in microCMS.

• Object format
• One text field

In the API creation screen, enter a desired API name and Endpoint.

Next, select the object format.

Finally, set the fields. This time, we will set only one Text Field.

With the above settings, the API will be created, allowing you to submit content.
Move to the editing screen, enter the desired values, and publish.

At this point, a response containing content data will be returned from the API.
Click on the API Preview in the upper right corner to access the created API and confirm that a JSON response is being returned.

Preparing the Nuxt Project

Next, create a Nuxt project using the official CLI provided by Nuxt. Let's run the following command.

$ npm create nuxt@latest nuxt-microcms

Several options will appear, but select all the default options.

Navigate to the corresponding directory and start the development server.

$ cd nuxt-microcms
$ npm run dev

Open http://localhost:3000 and confirm that the initial Nuxt screen is displayed.

Initializing nuxt-microcms-module

Install the nuxt-microcms-module provided officially.

$ npm install nuxt-microcms-module

Edit the nuxt.config.ts as follows. Enter the Service ID (the part of XXXX in XXXX.microcms.io) for service-domain and the API Key for api-key.

export default defineNuxtConfig({
  // omitted
  modules: ['nuxt-microcms-module'],
  microCMS: {
    serviceDomain: 'service-domain',
    apiKey: 'api-key',
  },
})

Fetching and Displaying Information from microCMS

Create app/pages/index.vue and edit it as follows.

<template>
  <div class="container">
    <div v-if="data">
      <h1 class="title">
        {{ data.text }}
      </h1>
    </div>
  </div>
</template>

<script setup lang="ts">
    type Hello = {
        text: string;
    };
    const { data } = await useMicroCMSGetObject<Hello>({
      endpoint: "hello",
    });
</script>

This time, we are passing the data fetched from microCMS as data to the template side for display.
Access http://localhost:3000 in this state.

If it is displayed as above, you have successfully connected to the data from microCMS.
Try changing the content submitted to microCMS and see if the displayed content changes as well.