Vue 2 and Vue-Resource [Cannot read property 'get' of undefined(…)]

Question

Recently upgraded to Vue-2 using Broswerify and Vueify. In the main app I had to require vue/dist/vue.js instead of 'vue' since im not using Webpack, however now when I use Vue.use(require('vue-resource')); I get $http is undefined. Vue1 this worked smoothly. What am I missing to get this working with Vue-2?

Error:

Uncaught TypeError: Cannot read property 'get' of undefined(…)

Main.js:

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

// var amazon = require('amazon-affiliate-api');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */


new Vue({
    el: '#wrapper',
    mounted: function () {
        //use mounted instead of ready.
        this.getHttp('/test', this.successFetch);
    },
    data: {
    },
    methods: {
        successFetch: function (results) {
            console.log(results);
        },
        //vue resource methods
        getHttp: function (url,callback) {
            const params = {
                headers: {
                    'X-CSRF-TOKEN': this.token
                }
            }
            this.$http.get(url, params).then(callback).catch(err => console.error(err));
        },

Gulp.js:

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');
require('browserify');
require('vueify');


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

Package.json:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "aliasify": "^2.1.0",
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-elixir": "^6.0.0-14",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3",
    "vueify": "^9.3.0"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "browserify": "^13.1.1"
  }
}

Answer 1

If you are just looking to get this set up as an SPA (not necessarily using laravel) then I'd recommend looking to the vue-cli when it comes to scaffolding your project.

Within the cli you'll find a simple and more advanced set up for browserify.

If you scaffold the simple version and add vue-resource: npm install vue-resource -save--dev

Then you can tweak your main.js set up as follows:

import Vue from 'vue'
import VueResource from 'vue-resource'
import App from './App.vue'

Vue.use(VueResource)

new Vue({
    el: '#app',
    render: h => h(App),
    mounted () {
        this.getHttp('/')
    },
    methods: {
        getHttp (url) {
            this.$http
                .get(url)
                .then(response => console.log(response))
                .catch(err => console.error(err))
        },
    },
})

The App component is just the default from the cli build

If you are building for laravel then you have a number of redundant modules within Package.json and you could look to use laravel elixir vueify. There's a fork for Vue 2.0 on npmjs (haven't ever tried it):

npm install laravel-elixir-vueify-2.0

I am assuming the issues you're having are caused by the requiring of packages that are not being used by elixir when building your app.js output. laravel-elixir-vue-2 is for instance a webpack build - so probably isn't doing anything.

Simplify your gulp set up to:

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

require('laravel-elixir-vueify-2.0');

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

In theory you'd then be correctly building the output and using Vue 2.0 packages to build it. If you combine that with the above vue-cli you should be able to scaffold these early stages using tried and tested code to make troubleshooting a lot easier.