CODEWITHSUNDEEP
axiosvuetify.jsnuxt.js
Gruff
Gruff

Reputation: 1918

Why is axios not using the settings in nuxt.config.js?

The axios settings for baseURL and browserBaseURL in nuxt.config.js are not being used by axios and the requests are going to localhost instead.

Here's an extract of nuxt.config.js:

  modules: [
    '@nuxtjs/axios'
  ],
  axios: {
    baseURL: 'http://192.168.8.137:8081',
    browserBaseURL: 'http://192.168.8.137:8081'
  },

And here's the code in the vue file:

<template>
  <v-treeview
    v-model="tree"
    :open="open"
    :items="items"
    activatable
    item-key="id"
    :load-children="listDir"
    :active.sync="active"
    return-object
  >
 ....
</template>

<script>
    import axios from 'axios'
    export default {
      ....
      methods: {
        async listDir(item) {
          // let url = 'http://192.168.8.137:8081/filemanager/ls'  // Works fine if hardcoded here
          let url = '/filemanager/ls'
          await axios.get(url)
            .then(....

I think the problem is that I'm using axios.get(url) and not $this.axios.get(url), however my method is being called from a vuetify treeview component and $this is not available.

How do I get hold of $this.axios?

The code works fine if I hardcode the URL into the axios call.

Upvotes: 1

Views: 1725

Answers (1)

farincz
farincz

Reputation: 5173

using 

import axios from 'axios'

you are importing "clean" axios module. You need to use axios instance created by nuxt itself.

In component (or in Vue actions) use just (without importing axios)

this.$axios.get(...)

or (convenient $get method returns response data instead response object)

this.$axios.$get(...)

Upvotes: 5

Related Questions