microCMSのNuxtJS用モジュールを初めて使ってみたのでそれをご紹介していこうと思います。
基本的には公式が出している通りに進めれば良いと思います。

パッケージをインストール

$ yarn add nuxt-microcms-module

nuxt.config.jsに追記

export default {
  buildModules: ['nuxt-microcms-module'],
  microcms: {
    options: {
      serviceDomain: process.env.SERVICE_DOMAIN,
      apiKey: process.env.API_KEY,
    },
    mode: process.env.NODE_ENV === 'production' ? 'server' : 'all',
  },
};

.envを作成

API_KEY=xxxxxxxxxxxx
SERVICE_DOMAIN=xxxxxxxxxxxxx

SERVICE_DOMAINは、xxxxx.microcms.ioのxxxxx部分を入れる形で大丈夫です。

実際に使う

<template>
  <div class="pTop">
    <Card :lists="lists" />
  </div>
</template>

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

子コンポーネントからpropsで渡している想定での記述になりますが最低限これで表示されます。

まとめ

初めてmicrocmsのモジュールを使って取得してみましたが非常に簡単で使い勝手がいいと感じました。
ホスティングサービスを使う場合は、NODE_ENVを含む環境変数を設定するとしっかりと動作します！