Vueify with vue-resource - laravel

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.

Answer 1

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(...)
}

Answer 2

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

Answer 3

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',
//...
);
}