Nuxt.jsとMicrocmsとNetlifyを使った記事の検索フォームの作成でエラーになる

Question

Nuxt.jsとNetlifyとMicrocmsで作ったブログサイトに検索フォームを実装したいのですがhttps://qlitre-weblog.com/nuxt-microcms-keyword-search/の記事しかなかったのでこの内容で実装したのですがエラーになります。
エラーは「Cannot read property 'get' of undefined」でこのエラー内容で調べたらnuxt.config.jsに↓のコードを追加すればいいというのを見て試したのですがダメでした。

modules: [
    '@nuxtjs/axios'
  ],

エラー画面は↓です。

pages/index.vueに↓のコードを書きました。
「xxxxxxxxxxxxxxxxxxxx」と書いている部分はダミーにしています。

<template>
    <div>
        <Header/>
        <div class="l-top-main">
            <div>
                <ul class="l-top-main__articles">
                    <li 
                        v-for="(content,contentIndex) in contents"
                        :key="content.id"
                    >
                        <nuxt-link :to="`/blog/${content.id}`">
                            <div
                                class="l-top-main__articles-wrap1"
                                v-if="contentIndex % 2 == 0"
                            >
                                <img 
                                    class="l-top-main__articles-img"
                                    :src="content.eyecatch.url" alt=""
                                >
                                <div class="l-top-main__articles-field">
                                    <h2 class="l-top-main__articles-title">{{content.title}}</h2>
                                    <div>
                                        <time 
                                        class="l-top-main__articles-date"
                                        :datetime="content.published" 
                                        v-text="$dateFns.format(new Date(content.published),'yyyy年MM月dd日')"
                                        />  
                                        <span>|</span>
                                        <span class="l-top-main__articles-tag">{{content.tag}}</span>
                                    </div>   
                                </div>
                            </div>
                        </nuxt-link>
                        <nuxt-link :to="`/blog/${content.id}`">
                            <div
                                class="l-top-main__articles-wrap2"
                                v-if="contentIndex % 2 == 1"
                            >
                                <div class="l-top-main__articles-field">
                                    <h2 class="l-top-main__articles-title">{{content.title}}</h2>
                                    <div>
                                        <time 
                                        class="l-top-main__articles-date"
                                        :datetime="content.published" 
                                        v-text="$dateFns.format(new Date(content.published),'yyyy年MM月dd日')"
                                        />     
                                        <span>|</span>
                                        <span class="l-top-main__articles-tag">{{content.tag}}</span>
                                    </div>   
                                </div>
                                <img 
                                    class="l-top-main__articles-img"
                                    :src="content.eyecatch.url" alt=""
                                >
                            </div>
                        </nuxt-link>
                    </li>
                </ul>
                <nuxt-link 
                    to="/archive"
                    class="l-top-main__archive"
                >全ての記事を見る</nuxt-link>
            </div>
            <div class="l-top-main__sidebar">
                <div class="l-top-main__recently-article">
                    <h2 class="l-top-main__recently-article-title">最近の記事</h2>
                    <ul>
                        <li 
                        v-for="content in contents"
                        :key="content.id"
                        >{{content.title}}</li>
                    </ul>
                    <nuxt-link 
                        to="/archive" 
                        class="l-top-main__recently-archive"
                    >一覧を見る</nuxt-link>
                </div>
                <div class="l-top-main__search">
                    <h2 class="l-top-main__search-title">検索</h2>
                </div>
            </div>
        </div>
        <Footer/>
    </div>
</template>

<script>
import axios from "axios";

export default{
    data:function(){
        return{
         contents:[]
            
        }
    },
    async asyncData({
        $microcms,
        params
    }) {
        const { datas } = await axios.get(
            "https:xxxxxxxxxxxxxxxxxxxx",
            {
                headers: { "X-MICROCMS-API-KEY": "xxxxxxxxxxxxxxxxxxxx" }
            }
        );
        const limit = 10
        const page = params.p || '1'
        const data = await $microcms.get({
        endpoint: 'post',
        queries: {
            limit: limit,
            offset: (`${page - 1}`) * limit
        }
        })
        const numPages = Math.ceil(data.totalCount / limit);
        const current = params.p == undefined ? 1 : Number(params.p)
        // console.log(data)
        return {
            posts: data.contents,
            numPages,
            current,
            datas
        };
    },
}

コードをどう変えればエラーがなくなるのでしょうか？
ネットであまりに情報がなくて自分で解決できないため質問しました。

Answer 1

恐らく $microcms が存在していない状態で get 関数を呼び出そうとしてエラーが起きています。
$microcms を呼び出すために、nuxt-microcms-module は導入済みでしょうか？

参考になりそうな記事
https://blog.microcms.io/nuxt-microcms-module/

Comments

[uheiuhei]

回答ありがとうございます、返事が遅れて大変申し訳ありません。
導入していますが同じエラーが出ています。