New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can I use axios-module in non-vue files? #28

Closed
0pt1m1z3r opened this Issue Sep 15, 2017 · 6 comments

Comments

Projects
None yet
6 participants
@0pt1m1z3r

0pt1m1z3r commented Sep 15, 2017

I want use it in es6 classes.

This question is available on Nuxt.js community (#c28)
@clarkdo

This comment has been minimized.

Member

clarkdo commented Oct 28, 2017

axios-module is for easy axios integration with Nuxt.js. It creates axios instance inside plugin and only delegates to ctx as $axios and app as axios.

So if your js is binded to Nuxt context, you can use ctx.$axios or app.axios, if not you may need to create a axios instance manually just like plugin.template.js does.

We may also discuss if it's necessary to change the module to export the axios instance for common import/require use.

@pi0 How do you think about it 😸 ?

@0pt1m1z3r

This comment has been minimized.

0pt1m1z3r commented Oct 31, 2017

My version.

~/plugins/axios-port.js

import { setClient } from '~/services/apiClient'

export default ({ app, store }) => {
  setClient(app.$axios)
}

~/services/apiClient.js

let client

export function setClient (newclient) {
  client = newclient
}

// Request helpers
const reqMethods = [
  'request', 'delete', 'get', 'head', 'options', // url, config
  'post', 'put', 'patch' // url, data, config
]

let service = {}

reqMethods.forEach((method) => {
  service[method] = function () {
    if (!client) throw new Error('apiClient not installed')
    return client[method].apply(null, arguments)
  }
})

export default service

Use:

import apiClient from '~/services/apiClient'

export default {
  async current () {
    return apiClient.get('...')
  }
}
@nikkanetiya

This comment has been minimized.

nikkanetiya commented Nov 8, 2017

@clarkdo I think it required to be able to use a module to export the axios instance for common import/require use. The way @0pt1m1z3r shown here will work, but I wish to export be part of this package which will allow me to use axios instance set by auth-module which will have data pre-set headers like tokens. Currently, I am using ENT models which is not vue files so I am not able axios instance created by axios-module.

@pi0

This comment has been minimized.

Member

pi0 commented Jan 28, 2018

In a nutshell, we can not make global exports because of SSR. If there is NO WAY to access nuxt instance, you have to use window.$nuxt.$axios but this only works for Browser. Axios is available at:

  • plugins
  • vuex store
  • pages
  • middleware
  • other modules

I recommend using a plugin to access nuxt context and axios instance.

@pi0 pi0 closed this Jan 28, 2018

@lukasborawski

This comment has been minimized.

lukasborawski commented Feb 14, 2018

@0pt1m1z3r f... yeah this is working perfectly

@xxRockOnxx

This comment has been minimized.

xxRockOnxx commented May 1, 2018

At first I thought I needed axios-module to use axios with Nuxt but in my usage, I found out I don't need especially I am used to doing the service-pattern like in Java. My gist might help those who do it like me (for OP's case, return class instead of just plain object)

Here's I do it: https://gist.github.com/xxRockOnxx/4c52ca0a59a970d6f02d310cdf0ddfe3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment