How to import module to external file

[lukasborawski]

So, let's say that I'm using axios module and extending it as a plugin. Now i need to import it to the external api.js file to define methods to fetch some data.

plugins/axios.js

export default function ({ $axios, app, store, redirect, route }) {
  $axios.defaults.baseURL = process.env.baseUrl
  ...

api/api.js

import axios from '@nuxtjs/axios'

export default axios

and some api file

api/feed.js

import api from './api.js'

export default {
  getPosts (params) {
    return api.get
    ...

How to do this? Got undefined errors ...

cc @pi0

_{This question is available on Nuxt.js community (#c88)}

[husayt]

I was just going to ask the same question. Additional question would be then how to use those apis from pages/vuex actions?

Basically, what is the best way to refer to axios from plugins or other js files?
import axios from "axios" does only provide blank axios instance, not related to configured one.

[lukasborawski]

@pi0 @atinux @alexchopin can you guys help with this one?

[lukasborawski]

@husayt here you will find nice solution, tested, working.

#28

Closing.

[husayt]

@lukasborawski I think the following solution is far more elegant.

/plugins/api.js

const apiFactory = axios => ({
  getUsers(period = "Today") {
    return axios.get(`api/users`)
  },
  getProducts() {
    return axios.get(`/api2/products`)
  }
})

/*
** Executed by ~/.nuxt/index.js with context given
** This method can be asynchronous
*/
export default ({ $axios }, inject) => {
  // Inject `api` key
  // -> app.$api
  // -> this.$api in vue components
  // -> this.$api in store actions/mutations
  const api = apiFactory($axios)
  inject("api", api)
}

then use it like this (remember to register api.js in plugins in nuxt.config.js)

  async asyncData({ app }) {
    let { data } = await app.$api.getProducts()
...
  },

[husayt]

I also suggested this as an addition to axios module

[bovas85]

I'd recommend this above to be added with some config to avoid complexity

[husayt]

@bovas85 this in the plan. @pi0 is working on adding this to nuxt axios module. Will be really cool

[bovas85]

Great stuff :)

[tim-yao]

@husayt I couldn't make your code work, keep saying Cannot read property 'getTest' of undefined. getTest is my version of your getProducts. Do you know why?

[husayt]

I would need to see your code to say something.

…

On Wed, 11 Apr 2018, 08:06 Tim Yao, ***@***.***> wrote: @husayt <https://github.com/husayt> I couldn't make your code work, keep saying Cannot read property 'getTest' of undefined. getTest is my version of your getProducts. Do you know why? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#101 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABHXrBJxEgSWYlK8BzGr_0o9lmOYHZTyks5tnZ1TgaJpZM4SCYtF> .

[tim-yao]

It's a private repo, I am not able to share with you. But I used exactly same code as you posted. Thanks anyway @husayt
However I used other work above around in #101 (comment) and it works for me.

[yob-yob]

Hi, I know that this thread is really old now. so yeah I'm wondering if this is still the best and most clean solution for this problem?

I'm Referring to the fix that @husayt made -- Husayt's Fix

I'm currently using this as my solution last time. it has been 2 years now and I wanted to update my code to be more readable and much easy to document and test.

[husayt]

@MerrySean it still works for me too. I have seen some other approaches, but this is by far teh most simple one and works like a brick.

[manniL]

I'm also using the same technique, described a bit more in detail in my blog post

[husayt]

Thanks @manniL, but isn't it now recommended to use nuxt http module instead of axios one? From what I understand the latter is not going to be supported moving forward. Although, that doesn't change the main point of the article, still is good to know

[ubay1]

just import this in js file
import axios from 'axios/index';