I've been fighting with Vue, TypeScript and Axios and I cannot arrive at what feels like a satisfactory solution.
Most guides will tell you to do this:
Main.ts
import axios from 'axios';
Vue.prototype.$http = axios;
And then use the $http. TypeScript doesn't like this:
Property '$http' does not exist on type CombinedVueInstance
How can I register axios globally and avoid any TypeScript errors?
Based on @GentlemanCrow answer below I created a file in my root directory called:
axios-plugin.d.ts
import _Vue from 'vue';
import Axios from 'axios';
export function AxiosPlugin<AxiosPlugOptions>(Vue: typeof _Vue, options?: AxiosPluginOptions): void {
// do stuff with options
Vue.prototype.$http = Axios;
}
export class AxiosPluginOptions {
// add stuff
}
import { AxiosStatic } from 'axios';
declare module 'vue/types/vue' {
interface Vue {
$http: AxiosStatic;
}
}
This produces the error:
(TS) An implementation cannot be declared in ambient contexts.
And on Vue.prototype.$http = Axios; the error is:
Statements are not allowed in ambient contexts.
Removing the export function AxiosPlugin function and attempting to execute a request errors with:
TypeError: "this.$http is undefined"
Where should the following code go?
export function AxiosPlugin<AxiosPlugOptions>(Vue: typeof _Vue, options?: AxiosPluginOptions): void {
// do stuff with options
Vue.prototype.$http = Axios;
}