Vue-resource: Using Browserify + Laravel 5, vue-resource never gets included

[ayyobro]

I'm using Browserify with Laravel 5.2.

I included the vue-resource package into my package.json file as "vue-resource": "^0.7.0".

I included the package into my main Vuejs file like so:

var Vue = require('vue');
Vue.use(require('vue-resource'));

But I still get the error:

Uncaught TypeError: Cannot read property 'get' of undefined at this chunk of code;

    methods: {
        fetchUsers: function() {
            this.$http.get('/my/test/uri', function(accounts) {
                this.$set('accounts', accounts);
            });
        }
    }

I have done npm install, npm install vue-resource, and npm install vue-resource --save, but none of these have remedied the issue. I have been making sure that I run gulp to make the changes visible.

Are there any steps I'm missing?

[andreliem]

Did you ever resolve this problem? I'm having the same problem and based my setup off the vue-cli browserify installer.

[andreliem]

So I'm not sure if there were any regressions with new releases, but I looked at issues from a year ago and there was a fix where you need to make sure Vue is attached to the window.

See this: https://github.com/vuejs/vue-resource/issues/2

Following the recommendation, I have the following setup which now works:

var Vue = require('vue');
window.Vue = Vue
Vue.use(require('vue-resource'))

I don't think we should need to use window, but for now I'll stick with this until I can figure out what's going on.

Also, it doesn't seem to work if you use babel/es6 with imports.

[obonyojimmy]

if you are sending post put patch request you must set the HTTP headers , below is example code using meta headers :

app.js

var vueResource = require('vue-resource')
Vue.use(vueResource)
Vue.http.headers.common['X-CSRF-TOKEN'] = $('meta[name="csrf-token"]').attr('content');

index.blade.php or (some blade template you use)

..head..
<meta name="csrf-token" content="{{ csrf_token() }}">
..head ...

method or something in app.js or something else

var resource = this.$resource('index'); // or some other route resource from laravel routes
resource.save({name: 'jimmy'}).then(function (response) {
 // success callback
}, function (response) {
  // error callback
 });