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, Jun 22 '16 at 12:42
Thanks for your reply. Yes, I receive: `Uncaught TypeError: Cannot read property 'get' of undefined` — chrisg86, Jun 22 '16 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, Jun 22 '16 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, Jun 23 '16 at 08:03

Pantelis Peslis · Answer 1 · 2016-06-23T08:36:07.853

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 '16 at 08:36

answered Jun 22 '16 at 19:39

Pantelis Peslis

14,930
5
44
45

Nice hint on the global object and the `this` bind, thanks – Yerko Palma Jun 22 '16 at 22:18
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. – chrisg86 Jun 23 '16 at 08:03
To work the `Vue.http` you should import the Vue as described to the question and set the VueResource properly. – Pantelis Peslis Jun 23 '16 at 08:25

score 3 · Answer 2 · answered Jun 22 '16 at 16:56

3

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

answered Jun 22 '16 at 16:56

ishadif

721
2
8
20

score 1 · Answer 3 · answered Jun 22 '16 at 12:50

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 '16 at 12:50

Jeff

24,623
4
69
78

Thanks for your answer. Unfortunately this also returns error `Uncaught TypeError: Cannot redefine property: $url` – chrisg86 Jun 22 '16 at 13:15

Vueify with vue-resource

3 Answers3