[Vuejs]-Use vue-resource within vueify component

7👍

The answer was quite simple, I had to require('vue') in the component as well. I really did not think about this because I’m quite new to browser-/vueify.

The working code looks like this for anyone wondering:

<script>
    var Vue = require('vue');

    module.exports = {
        data: function () {
            return {
                message: "Hello World!"
            }
        },

        ready: function() {
            var _self = this;
            Vue.http.get('/api/users', function(data){
                _self.$set('users', data);
            });
        }
    }
</script>

EDIT: here is how I setup the whole dependencies and modules in my main.js file

// require dependencies
var Vue = require('vue');
var VueRouter = require('vue-router');
var VueResource = require('vue-resource');

// use vue-router and vue-resource
Vue.use(VueRouter);
Vue.use(VueResource);

// Laravel CSRF protection
Vue.http.headers.common['X-CSRF-TOKEN'] = document.getElementById('token').getAttribute('value');

// Routing
var router = new VueRouter();

var App = Vue.extend();

// start router in element with id of app
router.start(App, '#app');

3👍

FYI, for your .vue file, you don’t have to require Vue. Instead you can reference the instance like this:

this.$http.get(...

Leave a comment