Vue-fullpage.js

Official Vue.js wrapper for the fullpage.js library.

• Demo online | Codepen
• fullpage.js Extensions
• By @imac2. Thanks to VasiliyGryaznoy , dragg and Raphael Owino

Table of contents

1. Installation
2. License
3. Usage
4. Options
5. Methods
6. Callbacks
7. Contributing
8. Resources

Installation

Terminal:

// With bower
bower install vue-fullpage.js

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

License

Commercial license

Although vue-fullpage.js is under the MIT license as can be seen on the LICENSE file, notice fullPage.js library is under GPLv3. Therefore you'll need to purchase a Commercial License for fullPage.js if you want to use fullPage to develop non open sourced sites, themes, projects, and applications. [Purchase a Fullpage Commercial License]

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use fullPage under the terms of the GPLv3.

The credit comments in the JavaScript and CSS files should be kept intact (even after combination or minification)

Read more about fullPage's license.

Usage

Bundler (Webpack, Rollup)

You can check a bundle demo here.

import Vue from 'vue'
import VueFullPage from 'vue-fullpage'

Vue.use(VueFullPage);

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

Browser

You can check a browser stand alone demo here.

<!-- 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>

Options

You can use any options supported by fullPage.js library. Just pass options object into this wrapper like Vue.js property. Options object can contain simple options as well as fullPage.js callbacks.

Example:

new Vue({
  el: '#app',
  name: 'app',
  data() {
    return {
      options: {
        menu: '#menu',
        anchors: ['page1', 'page2', 'page3'],
        sectionsColor: ['#41b883', '#ff5f45', '#0798ec']
      },
    }
  }
});

Methods

You can make use of any of the methods provided by fullPage.js by accessing the instance object via the a reference $refs.fullpage.api.

Example:

<template>
  <div>
    <full-page ref="fullpage" :options="options">
      <div class="section">
        <button class="next" @click="$refs.fullpage.api.moveSectionDown()">Next</button>
        Section 1
      </div>
      <div class="section">
        <button class="prev" @click="$refs.fullpage.api.moveSectionUp()">Prev</button>
        Section 2
      </div>
    </full-page>
  </div>
</template>

Similar you can call any method of fullPage.js library directly on Javascript:

fullpage_api.setAllowScrolling(false);

Callbacks

As mentioned above you can pass callbacks through options object:

<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>

Similar you can handle any event of fullPage.js library. Just translate camelCase name of callback to kebab-case and use it ;)

Dynamic changes

vue-fullpage.js will watch all changes taking place within the fullpage.js options but will NOT automatically watch any DOM changes. If you want vue-fullpage.js to react to DOM changes call the update() method after making those changes. For example:

//creating the section div
var section = document.createElement('div');
section.className = 'section';
section.innerHTML = '<h3>New Section</h3>';

//adding section
document.querySelector('#fullpage').appendChild(section);

//where --> var vm = new Vue({...}) if calling it from outside.
vm.$refs.fullpage.build();

//or, when calling it from inside the Vue component methods:
this.$refs.fullpage.build();

In order for fullPage.js to get updated after a change in any of the fullPage.js options, you'll have to make sure to use such option in the initialisation.

For example, if we want fullPage.js to get updated whenever I change the scrollBar and controlArrows options, I'll have to use the following initialisation:

<script>
  export default {
    data() {
      return {
        options: {
          controlArrows: true,
          scrollBar: true
        },
      }
    },
  }
</script>

Or, if using new Vue, use an object instead of a function for the data property:

new Vue({
    el: '#app',
    data: {
        options: {
            controlArrows: true,
            scrollBar: true
        },
    }
});

Contributing

Please see Contributing to fullpage.js

Resources

• Wordpress theme
• fullpage.js Extensions
• CSS Easing Animation Tool - Matthew Lein (useful to define the easingcss3 value)
• fullPage.js cdnJS CDN