How to use vue-infinite-loading in Nuxt.js (Vue.js)

Question

I developing web app in Nuxt.js (Vue.js)

first, vue init nuxt/express MyProject

~page/help.vue

<template>
  <div>
    <p v-for="item in list">
      Line:
      <span v-text="item"></span>
    </p>
    <infinite-loading :on-infinite="onInfinite" spinner="bubbles" ref="infiniteLoading"></infinite-loading>
   </div>
</template>
<script>
let InfiniteLoading = require('vue-infinite-loading')
export default {
  ...
  components: {
    InfiniteLoading
  },
  methods: {
    onInfinite: function () {
      setTimeout(() => {
      const temp = []

      for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
          temp.push(i)
        }
      this.list = this.list.concat(temp)
      this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
      }, 1000)
    }
  }
} 
</script>

and, Moving from '/home' to '/help'

window is not defined

So, I tried the following

let InfiniteLoading;
if (process.BROWSER_BUILD) {
  InfiniteLoading = require('vue-infinite-loading')
}

result,

Failed to mount component: template or render function not defined.(found in InfiniteLoading)

I've tried the nuxt.js document method. However, I could not solve it. I want to find a more accurate answer.

help me, Thanks.

Answer 1

Just did it myself and works like a charm. See it in action on comment section at https://guessthatshit.com

Install:

npm install vue-infinite-scroll --save

Create file vue-infinite-scroll.js in plugins directory:

import Vue from 'vue'
import InfiniteScroll from 'vue-infinite-scroll'

Vue.use(InfiniteScroll);

Update nuxt.config.js to include following entry:

plugins: [
    {src: '~plugins/vue-infinite-scroll.js', ssr: false}
],

HINT: Dont forget to set infinite-scroll-disabled="autoLoadDisabled" properly otherwise you may spam your load function.

I also recognized that (only on nuxt production, not in dev) HTML is written before variables are assigned through "props: ['commentsData'],". therefore autoscroll function is triggered before some variable exists. Fix this with:

    computed: {
        autoLoadDisabled() {
            return this.loading || this.commentsData.length === 0;
        },
    },

Answer 2

If you use NuxtJs with vue-infinite-loading, you need to create a file.js in plugin folder:

import Vue from 'vue'
import InfiniteLoading from 'vue-infinite-loading/src/components/Infiniteloading.vue'
Vue.use(InfiniteLoading)

After, you create vendor build in nuxt.config.js:

build: {
   vendor: ['~/plugins/infiniteload.js']
},

Answer 3

My answer is working with NuxtJs

1. Add vue-infinite-loading as a plugin on your plugins folder
2. add this to nuxt.config.js file => { src: '@/plugins/vue-infinite-loading.js', ssr: false }
3. do not import it on your files or pages, just use it