Axios-module: Support @vue/composition-api setup function

[crutch12]

What problem does this feature solve?

Don't extend context and this with $axios field

What does the proposed changes look like?

import { useAxios } from '@nuxtjs/axios';

...
setup() {
  const $axios = useAxios();

  return { $axios };
}
...

_{This feature request is available on Nuxt community (#c365)}

[NickBolles]

Here's a simple plugin composable you can create. The same method can be used for almost all nuxt modules

import { useContext } from "@nuxtjs/composition-api";
import { NuxtAxiosInstance } from "@nuxtjs/axios";

export function useAxios(): NuxtAxiosInstance {
  const { $axios } = useContext();

  if (!$axios) {
    // throw error, no store provided
    throw new Error("nuxt axios is not defined!");
  }
  return $axios;
}

[crutch12]

@NickBolles it can't be used in nuxt plugins, only in setup function

And I don't like idea that we put all of our utils in context object

Actually if I use this module and your example - nothing will change. Setup function just will replace this.$axios with context.$axios which is the same object

[pi0]

Hi @crutch12 . At the point of time there is no plan for vue 2 composition-api support since it is experimental and migration plan for from composition-api needs nuxt3 implementation (specially for supporting hooks within plugins)

And I don't like idea that we put all of our utils in context object

Can you please explain more about this? And what would be your idea for improvement?

[crutch12]

Hi @pi0

vue 2 composition-api has the same api as vue 3, so I suggested to add composition-api support for fast migrate to vue 3
I didn't think that it's harder than implement nuxt3 at once and add hooks support. Ok, thx.

Can you please explain more about this? And what would be your idea for improvement?

Idk. I like the idea of provide/inject, when you don't make mess inside one shared object (context or $root).
I understand that it uses shared "context" inside, but symbols solves mess problem.
And this mechanism requires to be called only inside setup function (inside vue subtree), but

supporting hooks within plugins

will solve this problem I think.

[pi0]

Vue hooks are only valid within setup() function immediate calls that can use vm instance. Nuxt plugins are executed before vue instance creation (see here) so exactly we need to support hooks within plugins which is unlikely to be landed on nuxt2.

There is a very experimental implementation for globalPlugin but it is not recommended to use nor can be added to axios-module release now.

BTW please be patient for proper support and meanwhile you can try migration the app (except plugins) using composable that @NickBolles suggested.

[crutch12]

@pi0 how will it look like with nuxt3?

[danielroe]

@crutch12 If you want to use the provide/inject methodology with Nuxt 2 you can do so with the onGlobalSetup helper.