【Nuxt.js】動的ルーティングをgenerate時に反映させたい

前提・実現したいこと

Nuxt.js + microCMSで、投稿したコンテンツをAPIで取得し、静的ページとして生成したいです。
データの取得にはaxiosを使っておりますが、私の知識不足もありドキュメント通りに書いてもエラーになります。
初歩的な質問で恐縮ですが、お知恵を貸していただけるとありがたいです。

発生している問題・エラーメッセージ

Cannot read property 'get' of undefined

該当のソースコード

nuxt.config.jsです。

JavaScript:
1export default {
2  target: 'static',
3
4  head: {
5    title: 'microCMS-practice',
6    htmlAttrs: {
7      lang: 'ja',
8    },
9    meta: [
10      { charset: 'utf-8' },
11      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
12      { hid: 'description', name: 'description', content: '' },
13    ],
14    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
15  },
16
17  css: [],
18
19  plugins: ['~/plugins/axios'],
20
21  components: true,
22
23  buildModules: [
24    '@nuxtjs/eslint-module',
25  ],
26
27  modules: [
28    // https://go.nuxtjs.dev/axios
29    '@nuxtjs/axios',
30  ],
31
32  axios: {
33    baseURL: 'https://practice.microcms.io/api/v1',
34    headers: { 'X-API-KEY': 'MY-API-KEY' },
35  },
36
37  build: {},
38
39  generate: {
40    async routes({ $axios }) {
41      const pages = await $axios.get('/blog?').then((res) =>
42        res.data.contents.map((content) => ({
43          route: `/${content.id}`,
44          payload: content,
45        }))
46      )
47      return pages
48    },
49  },
50}

試したこと

microCMSのチュートリアル通りに記載

　-> axiosのインストール方法がimport axios from 'axios' となっていて、その記述違いにつまずき動作しませんでした。

エラー文から察するに、axiosの読み込みが正しくできていないのかとは思うのですが、Nuxtの方のドキュメントを読んでも、axiosのインストールはmodule内で@nuxtjs/axiosを読み込みながらnuxt.config.js内でaxiosを読んでいる例が見つけられず、正しい読み方が分かりません。