How to extends the context with e.g. $axios? about composition-api

[hipertracker]

The current Vue context is not available in setup(), it's available in onMounted().

import axios, { AxiosInstance } from 'axios'

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

declare module 'vue/types/vue' {
  interface Vue {
    $axios: AxiosInstance;
  }
  interface VueConstructor {
    $axios: AxiosInstance;
  }
}

Component:

import {  onMounted, createComponent } from 'vue-function-api'

export default createComponent({
  setup (props, context) {
    let axios
    //...
    onMounted(function (this: Vue) {
      axios = this.$axios
    })
  }
})

Alternative:

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

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

declare module '*.vue' {
  export default Vue
}

import {  onMounted, createComponent } from 'vue-function-api'

export default createComponent({
  setup (props, context) {
    let axios
    //...
    onMounted(function (this: Vue) {
      axios = this.axios
    })
  }
})

[liximomo]

import Vue from 'vue';
import axios  from 'axios'

Vue.prototype.$axios = axios

export default createComponent({
  setup (props, context) {
     let axios = context.root.$axios;
     // ...
  }
})

[liximomo]

Are you sure you have extended the Vue.prototype?

[IlCallo]

Collateral question: is context.root the element root or, as per previous API, the component tree root?

Until now we "littered" Vue prototype to easily access some globals ($axios, $vuex, etc), but this feels wrong with new function API, not being able to get $el from context and not being able to add those shortcuts to the context object itself.

Does it mean we should abandon Vue augmentation and only use VueConstructor augmentation, with stuff like Vue.axios.get() and similar?

[liximomo]

It should work if you properly extends the Vue.prototype.