Skip to content
This repository has been archived by the owner on Dec 1, 2023. It is now read-only.

How do you use this with Browserify/require? #11

Closed
jlem opened this issue Jun 8, 2015 · 10 comments
Closed

How do you use this with Browserify/require? #11

jlem opened this issue Jun 8, 2015 · 10 comments

Comments

@jlem
Copy link

jlem commented Jun 8, 2015

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
Copy link

Just require('vue-resource').

But you do need to install it explicitly:

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

@slickorange
Copy link

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
Copy link

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
Copy link

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

@slickorange
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

work, thanks

@im4aLL
Copy link

im4aLL commented Nov 24, 2016

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!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants