0

I am using Vue 3 and vue-auth together.

For vue-auth, my project needs to create http/index.ts, containing:

import axios from 'axios';

axios.defaults.baseURL = process.env.VUE_APP_API_URL;

export default (app) => {
    app.axios = axios;
    app.$http = axios;

    app.config.globalProperties.axios = axios;
    app.config.globalProperties.$http = axios;
}

but here I have a type error for app:

enter image description here

How can I fix this?

tony19
  • 125,647
  • 18
  • 229
  • 307
morteza mortezaie
  • 1,002
  • 14
  • 37

2 Answers2

3

app here would be an application instance, which the vue package exports as App. And if you want to attach axios and $http to the application instance, you'd have to use an any-type assertion.

               
import type { App } from 'vue';
import axios from 'axios';

axios.defaults.baseURL = process.env.VUE_APP_API_URL;
                      
export default (app: App) => {
    (app as any).axios = axios;
    (app as any).$http = axios;

    app.config.globalProperties.axios = axios;
    app.config.globalProperties.$http = axios;
}
tony19
  • 125,647
  • 18
  • 229
  • 307
0

This is not exactly an error, but rather a warning that if you don't define a type, the parameter will have the type: any. In that case, the IDE just advises you to use any, or whatever type you want

export default (app: any) => {
    app.axios = axios;
    app.$http = axios;

    app.config.globalProperties.axios = axios;
    app.config.globalProperties.$http = axios;
}

Is possible to disable this warning adding "noImplicitAny": false at your tsconfig.json if you want (:

Antony dos Reis
  • 1
  • 1
  • 2
  • 2
    While this answer is correct, it is often not advised to do so. Package `vue` exports types for its components, as seen in the answer provided by @tony19. It would be a better practice to type it eplicitly, than disable warnings or use `any`. – cSharp May 11 '22 at 00:42