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

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

~page/help.vue

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 documents way. However, I could not solve it. What causes these errors? I want to find a more accurate answer.

Thanks.

Did you disable the plugin on the server side in your nuxt plugins settings?

I did not set the plugin. I only set the component (.vue). If so, what should I fix?

Scratch that, the library is only this one component, so it won’t help us.

But usually you would write a Nuxt plugin that will be taking care of installing the Vue plugin, then set the ssr option in nuxt config file to false for this plugin.

Add first,
nuxt.config.js

plugins: [
  { src: '~plugins/infiniteloading', ssr: false }
]

seconds,
~plugins/infiniteloading.js

import Vue from 'vue'

if (process.BROWSER_BUILD) {
  const InfiniteLoading = require('vue-infinite-loading')
  Vue.use(InfiniteLoading)
}

third,
~page/help.vue

<template>
<div>
  <p v-for="item in list">
    Line:
    <span v-text="item"></span>
  </p>
  <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"></infinite-loading>
</div>
</template>
<script>
export default {
  ...,
  data () {
     return {
       list: []
    }
  },
  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>

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.

Which files need to be fixed?

I am also facing same problem, it says

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.

Did you get any solution for this?

Change ~plugins/infiniteloading.js to


import Vue from 'vue';
import InfiniteLoading from 'vue-infinite-loading';

Vue.component('infinite-loading', InfiniteLoading);