zex-vue-fullpage-next

a javascript library for fullpage powerd by zex

Usage no npm install needed!

<script type="module">
  import zexVueFullpageNext from 'https://cdn.skypack.dev/zex-vue-fullpage-next';
</script>

README

zex-vue-fullpage-next

A Vue-next library for fullpage.

Installation

In a browser:

<script src="zex-vue-fullpage-next.js"></script>

Using npm:

$ npm install zex-vue-fullpage-next

Note: add --save if you are using npm < 5.0.0

How to use:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }

      .section {
        width: 100%;
        height: 100%;
      }

      .section .fp-tableCell {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <vue-fullpage :options="options">
        <div class="section">Section 1</div>
        <div class="section">Section 2</div>
      </vue-fullpage>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
    <script src="../dist/zex-vue-fullpage-next.js"></script>
    <script>
      Vue.createApp({
        setup() {
          return {
            options: {
              menu: '#menu',
              anchors: ['page1', 'page2', 'page3'],
              sectionsColor: ['#41b883', '#ff5f45', '#0798ec'],
            },
          }
        },
      })
        .use(VueFullpage)
        .mount('#app')
    </script>
  </body>
</html>