Vue-resource: How do you use this with Browserify/require?

[jlem]

As titled. Not sure how to use this with browserify. I've installed via npm pointing to this repo, and it's in node_modules, but I'm not sure what to require()

[yyx990803]

Just require('vue-resource').

But you do need to install it explicitly:

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

[slickorange]

I am also struggling with this...
I am trying to use a vue-resource.js file I have on disk, like this:

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

I have also tried Vue.use(require('vue-resource')) but I can't get it to work...

In the first case I get a post not defined error. In the second case I get Uncaught TypeError: undefined is not a function

[yyx990803]

Ahh, I just noticed this package is not on npm. I'll publish it if that's ok with you, @steffans .

@jlem @slickorange in Browserify the require call follows the resolution algorithm of Node modules, so if you clone this repo into ./node_modules of your project, then you should be able to just require('vue-resource').

[yyx990803]

Update: it's now on npm. Just npm install vue-resource and you can require('vue-resource') directly.

[slickorange]

Still not working...
Here is the code for my main.js file. I am trying to use this in components but I have commented out the components and added a test method that I call by clicking a button.
When clicking the button I still get the post not defined error... I would appreciate any help. I am pretty new to most of this so excuse any stupid errors.

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

new Vue({
    el: '#app',
    components: {
       //searchcard: require('./components/search-card')
        //quoteitems: require('./components/quote-items')
    },

    methods: {
        test: function(){
            console.log('test');
            this.$http.post('/search/',
                {'test' : 'test'})
        }
    }
});

[yyx990803]

Ah. When you load it in CommonJS, it doesn't auto-install itself. You need to install it:

var Vue = require('vue')
var Resource = require('vue-resource')

Vue.use(Resource)

[slickorange]

Thanks for the insanely quick help :) That did the trick...
Where could I have read up on this to understand it myself? I tried looking through the docs, but I did not see anything.

[yyx990803]

Here's some info on the plugin interface: http://vuejs.org/guide/extending.html#Extend_with_Plugins

vue-resource auto-installs itself only when it finds a global Vue on window, but in CommonJS there's no global exposed, so you have to manually install it.

[Signorini]

work, thanks

[im4aLL]

Still if you are having issue with browserify + vuejs and if

var Vue = require('vue');

new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

not working then use aliasify

npm install aliasify --save-dev

in package.json

   "aliasify": {
        "aliases": {
            "vue": "vue/dist/vue.js"
        }
    },
    "browserify": {
        "transform": [ "aliasify" ]
    }

then in js file simple call

var Vue = require('vue');

2nd alternative is (without aliasify) -

just use

var Vue = require('vue/dist/vue.js');

it should work!