fullPage.js全屏垂直滚动插件，在Nuxt3框架中的应用

fullPage.js全屏垂直滚动插件，在Nuxt3框架中的应用

最近的一个项目（官网开发）需要用到Nuxt3框架，进行服务端渲染，这样可以有更好的SEO。正式开始Nuxt3的项目后发现这个框架非常多的坑。

我们的官网首页需要做垂直滚动效果，参考类似效果的网站是用了fullPage.js插件，一开始将它安装到Nuxt不太顺利，各种报错，Nuxt报500等等，上百度、必应、谷歌搜了又搜，fullPage与Nuxt框架的文章总共就那么几篇，都是比较老的文章，还好隐隐约约也找到些关键线索。

插件的适配程度跟Nuxt版本存在关联，如果你使用的是最新的Nuxt3，可能网上的Nuxt2老教程就不适用。

写这篇博客我的环境是：Node v18.15.0、Nuxt v3.9、pnpm v8.14.3

安装适合Nuxt3版本的fullPage.js插件：

pnpm i @fullpage/nuxt-fullpage

HTML和JS代码如下：

<full-page :options="options" id="fullpage" ref="fullpage">
    <section class="section">
		<img src=''>
    </section>
    <section class="section">
		<img src=''>
    </section>
    <section class="section">
		<img src=''>
    </section>
</full-page>

let options = {
  licenseKey: "OPEN-SOURCE-GPLV3-LICENSE"
  // 这里填fullpage.js的配置项，默认已经开启了垂直滚动效果
}

找到nuxt.config.ts文件，里面添加：

export default defineNuxtConfig({
  modules: [
    ...
    '@fullpage/nuxt-fullpage'
  ]
})

记得给垂直滚动效果的元素添加100vh高度，这样每翻一页刚好是一张背景图。

然后重启Nuxt，效果实现！如果按照上面步骤出现报错，或效果没有出现，请检查环境，以及重启Nuxt框架。