有时间是否可以研究下支持一下ssr，nuxt这种框架 about vue-virtual-waterfall HOT 7 CLOSED

确实有问题，我研究研究

from vue-virtual-waterfall.

@dxhuii

可以了，新版本0.0.13，这个是改后的示例

不过，我看你上面的那种直接渲染出dom的，是没办法的，因为我写的这套瀑布流方案，需要计算容器宽度和元素坐标的，可是在服务端是没办法直接获取用户客户端的容器宽度。

但是我改的这套方案，可以让数据先加载到页面里（SEO的时候至少可以看到），再通过客户端去渲染，数据如下图所框住的：

如果你希望的是完全由服务端渲染出dom，你需要考虑换个瀑布流方案了，比如column布局

from vue-virtual-waterfall.

我试了可以使用

1. 先安装@lhlyu/vue-virtual-waterfall库
2. 你需要在plugins文件夹下创建一个vue_virtual_waterfall.ts文件，代码如下:

import VueVirtualWaterfall from '@lhlyu/vue-virtual-waterfall'
export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(VueVirtualWaterfall)
})

3. 然后直接使用就行了,示例代码:

<template>
    <VirtualWaterfall :items="data.items" :calcItemHeight="calcItemHeight" :loading="data.loading" ref="vw" @load-more="loadMoreData">
        <template #default="scope">
            <Card v-if="scope?.item" :cover="scope.item.img"></Card>
        </template>
    </VirtualWaterfall>
</template>

from vue-virtual-waterfall.

用是可以用，但ssr数据无法正常渲染。只有客户端的调用的接口数据才能正常渲染。

我写了一个示例，你看一下。https://stackblitz.com/edit/github-dnvvxy?file=pages%2Findex.vue

上面有普通渲染和你的组件渲染，同一份数据，普通渲染可以正常显示，但你的组件就无法展示内容了。你看下。

如果把你的组件上的数据从datas换成data.items就可以正常渲染了，但这个时候就是客户端渲染了，你也试下。

from vue-virtual-waterfall.

@dxhuii

我根据你的示例改了一下，改后

我发现你给的示例里用到了 @vueuse/core库，这个是专门给vue使用的，nuxt要用专门的@vueuse/nuxt

而且@vueuse/nuxt里的hooks比@vueuse/core的少

比如你直接使用了import { useIntersectionObserver } from '@vueuse/core'，这个在nuxt使用不了

所以图片懒加载的代码需要用其他的方式去实现

from vue-virtual-waterfall.

我看了一下，现在还不是服务端渲染，如果是的话，HTML在查看源代码的时候，应该上面图片上HTML。
你发的示例是这样的

数据必须使用进入页面直接调用的数据。类似 这种的

const {
  data: datas,
  pending,
  error,
  refresh,
} = await useFetch('https://mock.tatakai.top/image/2/4');

但现在这样的调用的数据组给组件，还是无法正常渲染。

from vue-virtual-waterfall.

嗯，好的，辛苦了。

from vue-virtual-waterfall.