之前在其他项目中用过一个无缝滚动的组件 vue-seamless-scroll 感觉还可以，然后打算在 Nuxt 项目中继续使用，但是该组件的作者表示暂不支持 Nuxt ，但实际上我们可以通过添加 <client-only> 标签来解决这个问题，组件的演示地址。
一、安装 vue-seamless-scroll
- npm install vue-seamless-scroll --save
二、修改配置
在 plugins 目录中新建 seamless-scroll.js 文件：
import Vue from 'vue';
import SeamlessScroll from 'vue-seamless-scroll';
Vue.use(SeamlessScroll);
修改 nuxt.config.js 配置：
plugins: [
{ src: '@/plugins/vue-component', ssr: 'true' },
{ src: '@/plugins/vue-seamless-scroll', ssr: false }, // ssr: false
],
ssr: false 为 true 的话，会报 Windows is not defined 错误。
重启服务后，发现效果跟预期的不一样，或者控制台报错：
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
翻译过来就是：
[Vue警告]：客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由不正确的HTML标记引起的，例如在其中嵌套块级元素或丢失。Bailing水化和执行完整的客户端渲染。
三、解决方案
在 vue-seamless-scroll 外层添加 client-only 标签，告诉服务器仅在客户端渲染。
<client-only>
<vue-seamless-scroll
:data="newsList"
:class-option="optionLeft"
class="seamless-warp2"
>
<ul class="item">
<li v-for="item in newsList" v-text="item.title"></li>
</ul>
</vue-seamless-scroll>
</client-only>
