nuxt-fullpage.js

nuxt-fullpage.js

Nuxt module for fullpage.js library with official vue wrapper

📖 Release Notes

Setup

• Add nuxt-fullpage.js dependency using yarn or npm to your project
• Add nuxt-fullpage.js to modules section of nuxt.config.js

{
  modules: [
    // Simple usage
    'nuxt-fullpage.js',

    // With options
    ['nuxt-fullpage.js', { /* module options */ }],
 ]
}

Usage

This plugin creates a <full-page> component, used with ssr: false option. It's done because of window usage by core Fullpage plugin. This won't be fixed, as you can read in this Github issue. There is two points to notice: css classes will be applied only at client side and you will get warning in the console saying:

[Vue warn]: https://github.com/vaso2/nuxt-fullpage.js/blob/HEAD/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.

You can safely ignore this warning, but you might want to mitigate load flicker between your server and client versions of markup. For this you can apply css classes on server like this, they'll be replaced as soon as fullpage.js kicks in:

<full-page :options="options" id="fullpage">
    <div class="section fp-table active">
        <div class="fp-tableCell">
            <h3>Section 1</h3>
        </div>
    </div>
    <div class="section">
        ...
    </div>
</full-page>

You can find more details under example folder. Otherwise this fullpage module is excellent, have fun!

License

GPL-3.0, made by GALSD Web Development