SSR support?

[jdosullivan]

Anything on the roadmap with respect to supporting SSR?

I get a "document is not defined" when rendering on the server for the obvious reason that the server has no document.

[pulekies]

@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);

[dotnetCarpenter]

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.

[blocka]

You can make a plugin which only runs client side

[simonyouth]

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)
}

[ItsNash0]

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

[JanusSpark]

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>

[GuvanchBayryyyev]

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

[DavertMik]

@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.

[DavertMik]

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>

[Alex-451]

@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>

[17862974826]

这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。