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

Things to Confirm in Advance

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

Setting Up microCMS

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

• Object format
• One text field

In the API creation screen, enter your 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 your 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.

$ npx create-nuxt-app nuxt-microcms

When executing the command, a dialog prompt will be displayed, and you can freely input according to your environment.
Below are some example settings for reference.

After the project creation is complete, let's start the development server using the dev command.

$ cd nuxt-microcms
$ npm run dev

Then, access localhost:3000. If the creation is successful, a screen like the one below will appear in the browser.

Initializing nuxt-microcms-module

Install the official nuxt-microcms-module.

$ npm install nuxt-microcms-module@2

Then, configure it in nuxt.config.js as follows. Enter the microCMS service ID (subdomain part) in serviceDomain and the service-specific API key in apiKey.

export default {
  // omitted

  buildModules: ["nuxt-microcms-module"],
  microcms: {
    options: {
      serviceDomain: "service-domain",
      apiKey: "api-key",
    },
    mode: process.env.NODE_ENV === "production" ? "server" : "all",
  },
};

Fetching and Displaying Information from microCMS

Next, let's fetch information from the microCMS API we just created and display it on the screen.
Edit pages/index.vue.

<template>
  <div class="container">
    <div>
      <h1 class="title">
        {{ text }}
      </h1>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ $microcms }) {
    const data = await $microcms.get({
      endpoint: 'hello',
    });
    return data;
  }
}
</script>

The asyncData() method can operate on both the server side and the client side.
By performing API communication here, you can unify the processing during build time and page transitions.
Reference: https://ja.nuxtjs.org/guide/async-data/

Within asyncData(), we communicate with microCMS and pass the results to the template for display.

Now, let's access localhost:3000 to see the results.

Change the content submitted to microCMS and confirm that the displayed content on the screen also changes.