CODEWITHSUNDEEP
functionapivue.jsnuxt.jsglobal
May W.
May W.

Reputation: 317

how can I set a global function for call Apis in NUXT?

after some google searched, I am doing this in plugins/callApi.js

import axios from 'axios';
import Vue from 'vue';
Vue.use(callApi);

export default async (apiUrl, postData, headers = {}) => {
  let msg = await axios.post(https://my-api-location.com' + apiUrl,postData);
  return msg.data;
};

then set in nuxt.config.js

plugins: [
    '~plugins/callApi.js']

when I want to use it

const msgData = await callApi('/api/news/getNewsList', postData);
if (msgData.response === 'success') { .......

but when I start yarn dev, it hightlight "Vue.use(callApi);" part and says "callApi is not defined"

how cant I fix it? thanks a lot :)

Upvotes: 0

Views: 1990

Answers (1)

Tadeu Marques
Tadeu Marques

Reputation: 844

I actually re-read your answer because I was a little confused.

So, in your callApi.js, you define what you want there, but you are calling Vue.use(callApi) in the file where you are actually defining what callApi will be.

At the moment the compiler goes to Vue.use(callApi), this variable "callApi" is not defined yet (because it will only be available after it finishes compiling this very file).

So just do the

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

export default async (apiUrl, postData, headers = {}) => {
  let msg = await axios.post(https://my-api-location.com' + apiUrl,postData);
  return msg.data;
};

then, by setting the plugin path on the plugins property in the nuxt.config file (exactly the way you did), the very callApi file will be automatically called (try to put a console log in your callApi file, and you'll see it logging when you start your application).

An example of what you want:

https://codesandbox.io/s/nuxt-app-demovue-ssr-forked-s94rz?file=/pages/index.vue

Now in your plugin, you have to decide exactly what you want to do. you might want to expose the function or make it globally available, that's up to you!

For this last option, you might want to take a look here:

Vue/Nuxt: How to define a global method accessible to all components?

Good luck!

Upvotes: 1

Related Questions