What causes the failure to register Axios as a global variable in this Vue app?

I have been working on an SPA with Vue 3, TypeScript and The Movie Database (TMDB) API.

I have been using Axios by importing it in every component that makes use of it (with import axios from "axios") but, since most of my components need it, I thought it was a good idea to register Axios as a global variable.

So, in main.js, I have:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"
const app = createApp(App)
app.use(router)
app.config.globalProperties.$axios=axios
app.mount('#app')

In src\components\MoviesList.vue (I use one of the many components as an example here), I have:

<template>
<div class="row list">
<div
v-for="movie in movies"
:key="movie.id"
class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"
>
<MovieCard :movie="movie" :genres="genres" :showRating="true" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import env from "../env";
// import axios from "axios";
import MovieCard from "./MovieCard.vue";
export default defineComponent({
name: "MoviesList",
components: { MovieCard },
props: {
listType: {
type: String,
required: true,
},
},
data: () => ({
searchTerm: "",
movies: [],
genres: [],
}),
mounted() {
this.listMovies();
this.getGenres();
},
methods: {
listMovies() {
this.$axios
.get(
`${env.api_url}/movie/${this.$props.listType}?api_key=${env.api_key}`
)
.then((response) => {
this.movies = response.data.results;
})
.catch((err) => console.log(err));
},
getGenres() {
this.$axios
.get(`${env.api_url}/genre/movie/list?api_key=${env.api_key}`)
.then((response) => {
this.genres = response.data.genres;
})
.catch((err) => console.log(err));
},
},
});
</script>

The problem

Since making this change, the code fails to compile, and the terminal throw the error:

> Property '$axios' does not exist on type 'CreateComponentPublicInstance'

Questions

1. What am I doing wrong?
2. What is the most reliable way to fix this issue?

The reason it doesn't compile is because you have a Typescript error.
The compiler is instructed to fail the build process on TS errors (not on warnings, though) because the assumption is it will also generate a JS error at runtime. That's not the case here, because $axios is actually added to every component instance, even though Typescript doesn't know it.

One (not recommended) way to go about it is to just ignore the error, keeping Typescript in the dark, using a @ts-ignore comment above every line where you're using this.$axios. You'll find it builds and works as expected.

The proper way of fixing this issue is to inform Typescript about the custom $axios prop you added to every component instance, using a Typescript declaration file (vue-shims.d.ts - or any other name, the .d.ts part is what matters), placed in src/ folder:

import axios from 'axios'

declare module 'vue' {
  interface ComponentCustomProperties {
    $axios: typeof axios
  }
}

This fix has the additional benefit of inferring axios's types, so you get code completion on its methods in most IDE's.

To learn more about Typescript module declarations, here's the documentation.
The most important aspect of module declarations is that they are cumulative. So you're not replacing Vue's 'vue' module declaration, you're adding to it.

As a side note, although what you have works, the recommended way to add an axios instance to Vue config's globalProperties is writing a vue plugin:

axios-plugin.ts

import { axios } from axios

const myAxiosInstance = axios.create({
  // your axios config here, interceptors, retries, etc...
})

export default {
  install(app) {
    app.config.globalProperties.$axios = myAxiosInstance
  }
}

... and, in main.ts:

import axiosPlugin from './path/to/axios-plugin'

const app = createApp()
  .use(axiosPugin)
  .mount...

Writing a plugin has the benefit of keeping main.ts clean. Besides, you're passing the same instance of axios to every component (which is useful when you want to apply some configuration or custom logic (automatically retry failed requests, re-fetch auth token upon expiry, etc...).

The first time I worked with Vue 3 I had the your same idea with the same problems, I read about a couple of guides and discovered the best way to handle Axios is to instance an ApiClient :

export const apiClient: AxiosInstance = axios.create({
baseURL: myBaseUrl,
headers: {
"Content-type": "application/json",
},
});

Then, you can easily call the Axios verbs like this, I suggest you to wrap these methods inside functions

function get(route, config) {
return apiClient.get(route, config);
}

I am sorry if you expected another response but this is the way I handled your same problem