Vue.js (vue-resource) app structure problems with sending HTTP request

Question

My Vue.js app structure is like so:

/app
    --assets
    --components
        --dashboard.vue
    --filters
    --views
        --dashboard-view.vue
    app.vue
    main.js

In my main.js file I have the snippet of code below to set up vue-resource to make HTTP requests:

Vue.use(require('vue-resource'))

Vue.http.options.root = 'http://localhost:3000/api/v1/'
Vue.http.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('authentication_token')

However, when I try to make an HTTP request in dashboard-view.vue it doesn't listen to the configuration set in main.js .

This is dashboard-view.vue :

<template>
...
</template>

<script>
module.exports = {
  ready: function() {
    this.$http.get('/me', function(data, status, request) {

    })
  }
}
</script>

I'm quite new to Vue.js so help is appreciated on how to structure my app so I can easily send HTTP requests.

Thanks

Answer 1

I was having this same issue. When vue-resource concatenates the root option with the url parameter, it adds a backslash between them by default. If you already have a backslash at the end of your root option or at the beginning of any of your url parameters, it will just skip the concatenation and default to the current root url.

Just change your root option declaration to:

Vue.http.options.root = 'http://localhost:3000/api/v1'

and also change your call in the vue component to:

<template>
...
</template>

<script>
module.exports = {
  ready: function() {
    this.$http.get('me', function(data, status, request) {

    })
  }
}
</script>