How to import module to external file

lukasborawski
83
lukasborawski
commented 2 years ago

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

1
husayt
455
husayt
commented 2 years ago

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.

1
lukasborawski
83
lukasborawski
commented 2 years ago

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

0
lukasborawski
83
lukasborawski
commented 2 years ago

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

https://github.com/nuxt-community/axios-module/issues/28

Closing.

0
husayt
455
husayt
commented 2 years ago

@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()
...
  },
0
husayt
455
husayt
commented 2 years ago

I also suggested this as an addition to axios module

0
bovas85
115
bovas85
commented 2 years ago

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

0
husayt
455
husayt
commented 2 years ago

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

0
bovas85
115
bovas85
commented 2 years ago

Great stuff :)

0
tim-yao
0
tim-yao
commented 2 years ago

@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?

0
husayt
455
husayt
commented 2 years ago

I would need to see your code to say something.

On Wed, 11 Apr 2018, 08:06 Tim Yao, notifications@github.com 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
https://github.com/nuxt-community/axios-module/issues/101#issuecomment-380337836,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABHXrBJxEgSWYlK8BzGr_0o9lmOYHZTyks5tnZ1TgaJpZM4SCYtF
.

0
tim-yao
0
tim-yao
commented 2 years ago

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 https://github.com/nuxt-community/axios-module/issues/101#issuecomment-365657478 and it works for me.

0
MerrySean
0
MerrySean
commented 2 months ago

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.

0
husayt
455
husayt
commented 2 months ago

@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.

0
manniL
7.0k
manniL
commented 2 months ago

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

0
husayt
455
husayt
commented 2 months ago

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

0
Informations
QuestionUnresolved
#c88 - Created 2 years ago