Use vue-axios to wrap axios into a plugin and provide TS typings

[IlCallo]

Is your feature request related to a problem? Please describe.
Missing axios typings when using Quasar with Typescript.

Describe the solution you'd like
vue-axios wraps axios installation into a plugin and provides typings.

axios boot file should change from

import axios from "axios";
import { VueConstructor } from "vue";

export default async ({ Vue }: { Vue: VueConstructor }) => {
  Vue.prototype.$axios = axios;
};

to

import axios from 'axios';
import VueAxios from 'vue-axios';
import { VueConstructor } from 'vue';

export default async ({ Vue }: { Vue: VueConstructor }) => {
  Vue.use(VueAxios, axios);
};

Instead of $axios, it would be available both on axios and $http (I think it's for compatibility with Vue resources or something like that).

(Vue typing as VueConstructor is an addition I made, should be integrated when TS is added to the project probably)

Describe alternatives you've considered
Manually defining types somewhere (into axios boot file?) for Vue instance and constructor like this

import Vue from "vue";
import {AxiosInstance} from "axios";

declare module "vue/types/vue" {

  interface Vue {
    $axios: AxiosInstance;
  }

  interface VueConstructor {
    $axios: AxiosInstance;
  }
}

If done in this way, $http can be avoided and $axios retained as is, avoiding breaking changes and an additional dependency.
Even if, the dependency is so small you could actually add it into Quasar and wrap axios installation with plugin system (which is the preferred way, as I understood).

Useful link: official Vue guide to deal with global properties with Typescript

[outofmemoryagain]

@IlCallo If the axios option is selected, it would be a good option to generate the Instance property typing for the global vue instance property. I however do not agree with using the vue-typescript naming conventions for 2 reasons.

1. It is inconsistent with the approach for already existing Quasar projects that may be including the typescript extension.
2. The vue-axios library violates that standard naming practices of prefixing a global instance property with "$". This helps to avoid property name collisions with local component property names.

[IlCallo]

I however do not agree with using the vue-typescript naming

You meant vue-axios?
We can take inspiration from its plugin installation file and do a custom one for Quasar.
My point is to keep everything consistent (wrap the dependency in a Vue plugin as per best practice) and provide typings (which can be done with a axios.d.ts file or directly into shims-vue.d.ts).
If you can provide me guidance on your preferred way into doing this (where to put files, etc) in Quasar, I can try a PR.

https://github.com/imcvampire/vue-axios/blob/master/src/index.js

[outofmemoryagain]

Yes sorry, I did mean vue-axios...

[outofmemoryagain]

@IlCallo I can provide some guidance, but the challenge is that the shim should be part of the Typescript extension, but I'm not sure that the extension has access to the flag that indicates if axios was selected during the project creation. If Typescript was an option during initial project creation (planned), this would be much easier. Otherwise, it might be best (at least for now) to just document the proper way to add the shim for axios as part of the up coming Quasar Typescript documentation.

[rstoenescu]

We'll tackle this for the starter kit as we talked.