Vue resources - plugin.apply is not a function

Question

I have a pagination component built with Vue 1, for which I am receiving data from Laravel pagination:

<template>
    <div class="row">
        <div class="col-md-8">
          <div v-if="zeroVideos">No videos found for "{{ query }}""</div>
        </div>
        <div class="col-md-8">
          <single-video v-for="video in videos" :video="video"></single-video>
        </div>
    </div>
    <div class="row justify-content-center">
        <pages v-if="meta && videos.length && showPagination" for="videos" :pagination="meta.pagination"></pages>
    </div>
</template>

<script>
    import eventHub from '../events.js'

    export default {
        props: ['query'],
        data () {
            return {
                videos: [],
                meta: null,
                showPagination: false,
                zeroVideos: false,
            }
        },
        methods: {
            getVideos (page) {
                this.$http.get('/search/videos?q=' + this.query + '&page=' + page).then((response) => {
                    this.videos = response.data.data
                    this.meta = response.data.meta
                    this.showPagination = response.data.meta.pagination.total_pages > 1
                    console.log('Videos ' + response.data.meta.pagination.total)
                    this.zeroVideos = response.data.meta.pagination.total < 1
                    eventHub.$emit('videos.counter', response.data.meta.pagination.total)
                })
            }
        },
        ready() {
            this.getVideos(1)
            eventHub.$on('videos.switched-page', this.getVideos)
        }
    }
</script>

For some reason, after I have updated my chrome, pagination stopped working and I am getting undefined for response.data.meta , but on checking the network tab in the console, I am sending the data from the backend:

data[{id: 43, uid: "15883245ef3de1",…}, {id: 44, uid: "15883245ef3de2",…},…]
meta:{pagination: {total: 8, count: 8, per_page: 20, current_page: 1, total_pages: 1, links: []}}

The pagination works fine on IE, Firefox and Safari, but on Chrome I have problems after updating. After investigating a bit I realised it is the problem with vue resources, because if I do the get request with vanilla js, I get the response data, but I would like to use the vue resources, since I am using it in quit a few components. I have 0.9.3 vue resources version, and I have tried to update it, because apparently the bug is fixed in the newer version, but on updating it I got the error:

plugin.apply is not a function

I have tried to change the way I import the plugin from, suggested here:

var VueResource = require('vue-resource');
Vue.use(VueResource);

to

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

But, still the same error, how can I fix this issues with vue resources?

Answer 1

the vue-resource have some issues and it has stopped updated and maintained. its author has written axios to replace vue-resource.Therefore, I recommend you use axios.

You need to install axios by npm or yarn and replace var VueResource = require('vue-resource'); Vue.use(VueResource); with var axios = require('axios'); Vue.prototype.$http = axios

reference:axios