Vue fullpage.js

The official vue-fullpage.js component for Vue.js

Installation

Terminal:

// With bower
bower install vue-fullpage.js

// With npm
npm install --save vue-fullpage.js

Usage

Bundler (Webpack, Rollup)

import Vue from 'vue'
import 'fullpage.js/vendors/scrolloverflow' // Optional. When using scrollOverflow:true
import './fullpage.scrollHorizontally.min' // Optional. When using fullpage extensions
import VueFullPage from 'vue-fullpage.js'

Vue.use(VueFullPage);

new Vue({
  el: '#app',
  render: h => h(App)
});

Browser

<!-- On the page head -->
<link rel="stylesheet" href="https://unpkg.com/fullpage.js/dist/fullpage.min.css">

                                <!-- Include after Vue (before closing body) -->
<script src="https://unpkg.com/vue-fullpage.js/dist/vue-fullpage.min.js"></script>

Required HTML

This wrapper creates a <full-page> component , which you can use like other Vue.js components. For example:

<div>
    <full-page ref="fullpage" :options="options" id="fullpage">
    <div class="section">
      First section ...
    </div>
    <div class="section">
      Second section ...
    </div>
  </full-page>
</div>

Callbacks

<template>
  <div>
    <full-page ref="fullpage" :options="options">
      <div class="section">
        First section ...
      </div>
      <div class="section">
        Second section ...
      </div>
    </full-page>
  </div>
</template>

<script>
  export default {
      data() {
          return {
              options: {
                  afterLoad: this.afterLoad,
              }
          }
      },

      methods: {
          afterLoad() {
              console.log("Emitted 'after load' event.");
          }
      }
  }
</script>

Or you can use the standard approach for event handling of Vue.js:

<template>
  <div>
    <full-page @after-load="afterLoad">
        ....
    </full-page>
  </div>
</template>
<script>
  export default {
      methods: {
          afterLoad() {
          ...
          }
      }
  }
</script>