SSR support? about vue-infinite-scroll HOT 11 OPEN

@jdosullivan This might be too late to help you, but in case it helps others I thought I'd reply. You can just put the following in your client-entry.js, so it is only referenced on the client.

var infiniteScroll = require('vue-infinite-scroll');
Vue.use(infiniteScroll);

from vue-infinite-scroll.

add configration in ‘plugins’ of the nuxt.config.js file, and custom this file in plugins directory

import Vue from 'vue';
import infiniteScroll from 'vue-infinite-scroll';

export default () => {
  Vue.use(infiniteScroll)
}

from vue-infinite-scroll.

from vue-infinite-scroll.

You can make a plugin which only runs client side

from vue-infinite-scroll.

it does show up and works fine on yarn dev but it breaks completely on a production environment

from vue-infinite-scroll.

I'm using nuxt and am not sure how to add a directive to only run client-side. I've naively tried to use this.use(inifiniteScroll) inside my mount function but this.use is not a function.

from vue-infinite-scroll.

it does show up and works fine on yarn dev but it breaks completely on a production environment

do you have a solution？I have encountered the same problem
Have a try with client-only.I solve it by it
<client-only> <infinite-loading></infinite-loading> </client-only>

from vue-infinite-scroll.

My answer is working with NuxtJs

1. Add vue-infinite-scroll as a plugin on your plugins folder
2. Add this to nuxt.config.js file => { src: '@/plugins/vue-infinite-scroll.js', ssr: false }
3. Do not add vue-infinite-scroll as a directive

Note: If you import it from another files except plugins, you will get an error

from vue-infinite-scroll.

@GuvanchBayryyyev I tried to follow your steps but stopped at step 3
How can I not use it as a directive? If this package has only directive.

from vue-infinite-scroll.

Ok, it worked!
I loaded it as a plugin in NuxtJS and added v-infinite outside of <no-ssr> tag

        <div v-infinite-scroll="loadMore" infinite-scroll-distance="10">
        </div>

from vue-infinite-scroll.

@DavertMik could you share your code? I would really appreciate your help since I just cant get it to work 😅

(The API call is supposed to use ssr.)
My component:

<template>
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-5 gap-4" v-infinite-scroll="fetchData">
        <div v-for="book in books" :key="book.id">
            <img class="rounded-t-lg w-80 mx-auto" :src="`${ book.image_server }${book.id}/cover.jpg`"/>
            <div class="rounded-b-lg bg-gray-700 h-14 px-2 leading-5 flex justify-center items-center">
                <p class="line-clamp-2">{{book.title}}</p>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'BookList',

    data: () => ({
        books: [],
        page: 0,
    }),

    methods: {
        fetchData() {
            console.log("Triggered"); 
            this.$fetch();
        }
    },

    async fetch() {
        let books =  await this.$axios.$post('https://www.open-books.com/api/getBook', {
            search: {
                text: '',
                page: this.page,
                sort: 0,
            }
        });

        this.books.push(...books.results)
    },
}
</script>

from vue-infinite-scroll.