Vueify with vue-resource

Question

I cannot seem to get vue-resource to work with vueify. I have defined one vue component which i am including in my main.js file.

import Vue from 'vue'
import MyComponent from './my-component.vue'

new Vue({
    el: '#app',
    components: {
        myComponent: MyComponent
    }
});

My vue component file looks like this:

<script>
    import Vue from 'vue';
    // import VueResource from 'vue-resource'
    // Vue.use(VueResource);

    export default {
        template: '#my-component-template',

        created: () => {
            Vue.$http.get('/my/api/123',
                data => {
                    console.log(data)
                }, err => {
                    console.log("Error");
                    console.error(err);
                }
            );
        }
    }
</script>

In the current state, I receive this error:

Uncaught TypeError: Cannot read property 'get' of undefined

If I comment out the two lines concerning vue-resource in my component file, the error I receive turns like this:

Uncaught TypeError: Cannot redefine property: $url

package.json:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.6",
    "gulp": "^3.9.1",
    "laravel-elixir": "^5.0.0",
    "laravel-elixir-vueify": "^1.0.3",
    "vue": "^1.0.25",
    "vue-resource": "^0.8.0"
  }
}

Gulpfile:

var elixir = require('laravel-elixir');
require('laravel-elixir-vueify');

elixir(function(mix) {
    mix.browserify('main.js');
});

All existing answers on SO have not brought any results. Please help.

Do you still get the error if you uncomment Vue.use(VueResource); ? — Frisbetarian-Support Palestine
– Frisbetarian-Support Palestine, Commented Jun 22, 2016 at 12:42
Thanks for your reply. Yes, I receive: Uncaught TypeError: Cannot read property 'get' of undefined — chrisg86
– chrisg86, Commented Jun 22, 2016 at 12:44
The redefine error usually happens because you have included vue-resource twice somewhere in your app. Are you by any chance importing your vue-resource file with elixir as well as with npm? Maybe put this on github if you are really struggling so we can take a look. — Stephan-v
– Stephan-v, Commented Jun 22, 2016 at 13:48
Turns out I still had a leftover script tag in my layout file that included vue-resource. Now combined with the answer from Pantelis Peslis i got it working. — chrisg86
– chrisg86, Commented Jun 23, 2016 at 8:03

pespantelis · Accepted Answer · 2016-06-23 08:36:07Z

4

You should replace the $http with http:

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

export default {
  created: () => {
    Vue.http.get(...)
  }
}

Also, it's a good practice to install the VueResource into the main file and then, we could use the this keyword as @Jeff said.

To achieve that, you should change the arrow function, because this refers to the global object:

// refers to the global object
created: () => {}

// refers to the Vue component
created () {
  this.$http.get(...)
}

edited Jun 23, 2016 at 8:36

answered Jun 22, 2016 at 19:39

pespantelis

15.4k7 gold badges46 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yerko Palma Over a year ago

Nice hint on the global object and the this bind, thanks

chrisg86 Over a year ago

Changing $http to http did not solve the issue. But changing the arrow functions did the trick. I also had a leftover script tag in my layout file that included vue-resource.

pespantelis Over a year ago

To work the Vue.http you should import the Vue as described to the question and set the VueResource properly.

ishadif · Accepted Answer · 2016-06-22 16:56:43Z

3

have you tried adding var VueResource = require('vue-resource'); in your root vue instance? also add Vue.use(VueResource).

answered Jun 22, 2016 at 16:56

ishadif

7312 gold badges9 silver badges20 bronze badges

Comments

Jeff · Accepted Answer · 2016-06-22 12:50:01Z

1

Once you add the plugin in main.js using Vue.use(VueResource), it adds the $http attribute to all Vue instances. You don't need to re-do it in your component file. Then you just use this.$http:

    created: () => {
        this.$http.get('/my/api/123',
            //...
        );
    }

answered Jun 22, 2016 at 12:50

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

1 Comment

chrisg86 Over a year ago

Thanks for your answer. Unfortunately this also returns error Uncaught TypeError: Cannot redefine property: $url

Collectives™ on Stack Overflow

Vueify with vue-resource

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related