[Nuxt.ts]Axiosをscriptにimportしたい

前提・実現したいこと

TypeScriptを始めてみようと、Nuxt.tsで遊んでます。
axiosを使って自前のAPIサーバ(todoアプリ系のAPI)を呼び出すようにするのを目標にしています。

困ってること

そこで、pluginにAPIを呼び出す部分を実装し、それをpages/index.vueにimportしたいのですが、axiosが読み込めていないようで困ってます。

環境

plugins/axios/index.tsとplugins/axios/modules/todo.tsを以下のように記述しました。

plugins/axios/index.ts

typescript
1export let axios: any;
2
3export default ({store, $axios}:{store:any,$axios:any}) => {
4
5  $axios.defaults.baseURL = 'http://127.0.0.1:8000/hoge'
6
7  $axios.onResponse( ({res}:{res:Response})=>{
8    return Promise.resolve(res);
9  })
10
11  $axios.onError(({err}:{err:Error}) =>{
12    return Promise.reject(err.message);
13  });
14
15  axios = $axios;
16}
17

plugins/axios/modules/todo.ts

typescript
1import {axios}from '../index';
2
3export default {
4  getTodo(id: any){
5    return axios.$get('todo/${id}')
6  },
7}

pages/index.vueのScriptは次のように書いてます

pages/index.vue

vue
1<script lang="ts">
2import TodoApi from '@plugins/axios/modules/todo';
3
4export default {
5  components: {
6  }
7}
8
9</script>

その他のconfigファイルは以下の様です
nuxt.config.ts

typeScript
1
2export default {
3  mode: 'universal',
4  /*
5  ** Headers of the page
6  */
7  head: {
8    title: process.env.npm_package_name || '',
9    meta: [
10      { charset: 'utf-8' },
11      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
12      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
13    ],
14    link: [
15      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
16    ]
17  },
18  /*
19  ** Customize the progress-bar color
20  */
21  loading: { color: '#fff' },
22  /*
23  ** Global CSS
24  */
25  css: [
26    'element-ui/lib/theme-chalk/index.css'
27  ],
28  /*
29  ** Plugins to load before mounting the App
30  */
31  plugins: [
32    '@/plugins/element-ui',
33    '@/plugins/axios/index'
34  ],
35  /*
36  ** Nuxt.js dev-modules
37  */
38  buildModules: [
39    '@nuxt/typescript-build'
40  ],
41  /*
42  ** Nuxt.js modules
43  */
44  modules: [
45  ],
46  /*
47  ** Build configuration
48  */
49  build: {
50    transpile: [/^element-ui/],
51    /*
52    ** You can extend webpack config here
53    */
54    extend (config:any, ctx:any) {
55    }
56  }
57}
58

tsconfig.ts

typeScript
1{
2  "compilerOptions": {
3    "target": "es2018",
4    "module": "esnext",
5    "moduleResolution": "node",
6    "lib": [
7      "esnext",
8      "esnext.asynciterable",
9      "dom"
10    ],
11    "esModuleInterop": true,
12    "allowJs": true,
13    "sourceMap": true,
14    "strict": true,
15    "noEmit": true,
16    "baseUrl": "..",
17    "paths": {
18      "~/*": [
19        "./*"
20      ],
21      "@/*": [
22        "./*"
23      ]
24    },
25    "types": [
26      "@types/node",
27      "@nuxt/types"
28    ]
29  },
30  "exclude": [
31    "../node_modules"
32  ],
33
34}
35

package.json

javascript
1{
2  "name": "Bokin",
3  "version": "1.0.0",
4  "description": "My super-duper Nuxt.js project",
5  "author": "hoge",
6  "private": true,
7  "scripts": {
8    "dev": "nuxt-ts",
9    "build": "nuxt-ts build",
10    "start": "nuxt-ts start",
11    "generate": "nuxt-ts generate"
12  },
13  "dependencies": {
14    "@nuxt/typescript-runtime": "^2.0.0",
15    "@nuxtjs/axios": "^5.13.1",
16    "axios": "^0.21.1",
17    "element-ui": "^2.14.1",
18    "nuxt": "^2.0.0"
19  },
20  "devDependencies": {
21    "@nuxt/types": "~2.14.0",
22    "@nuxt/typescript-build": "^2.0.3",
23    "@nuxtjs/eslint-config-typescript": "^5.0.0"
24  }
25}
26