Vue-fullpage.js

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

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

Installation
Basic usage
Options
Methods
Callbacks
Contributing
Resources
License

Installation

For using of this component you need to include:

fullPage.js library with its dependencies (jQuery)
Install and register this wrapper like simple Vue.js component.
Include fullPage.js files (jquery.fullpage.js and jquery.fullpage.css)

Terminal:

// With bower
bower install vue-fullpage.js

// With npm
npm install vue-fullpage.js

Check out the license for commercial projects.

Basic usage

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

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

<script>
  import FullPage from 'FullPage';

  export default {
    components: {
      FullPage,
    },

    data() {
      return {
        options: {
          paddingTop: '30px'
        },
      }
    },
  }
</script>

If you prefer to use Vue.component followed by new Vue, then you would have to include vue.min.js, build.min.js and optionally mixin.min.js if you will make use of fullpage.js methods. Demo online.

For example:

<script src="mixin.min.js"></script>
<script src="vue.min.js"></script>
<script src="build.min.js"></script>

Then initialise it this way:

Vue.component('full-page', fullPage.default);

new Vue({
    el: '#app',
    mixins: [fullPageMixin.default],
    data: {
        options: {
            scrollBar: false
        },
    },
    methods: {
        test: function(e) {
            alert("Test");
        }
    }
});

Options

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

Methods

fullPage.js contains many methods. You can use any of them. Just include fullPage mixin in your component and the `fullPageMixin.vue file. This mixin contains all methods which fullPage library provides.

Example:

<template>
  <div>
    <full-page>
      <div class="section">
        <button class="next" @click="moveSectionDown">Next</button>
        Section 1
      </div>
      <div class="section">
        <button class="prev" @click="moveSectionUp">Prev</button>
        Section 2
      </div>
    </full-page>
  </div>
</template>

<script>
  import FullPage from 'FullPage';
  import fullPageMixin from 'fullPageMixin';

  export default {
    mixins: [fullPageMixin],

    components: {
      FullPage,
    },
  }
</script>

Similar you can call any method of fullPage.js library.

Callbacks

As mentioned above you can pass callbacks through options object:

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

<script>
  import FullPage from 'FullPage';

  export default {
      components: {
        FullPage,
      },

      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>
  import FullPage from 'FullPage';

  export default {
      components: {
        FullPage,
      },

      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 $.fn.fullpage.update(); after making those changes. For example:

$('#fullpage').append(`<div class="section">
    <h3>New section</h3>
</div>`);

$.fn.fullpage.update();

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>
  import FullPage from 'FullPage';

  export default {
      components: {
        FullPage,
      },

      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
CSS Easing Animation Tool - Matthew Lein (useful to define the easingcss3 value)
fullPage.js jsDelivr CDN

License

Commercial license

You set the price! You choose what you consider fair. If you want to use vue-fullpage.js to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Get vue-fullpage.js Commercial License here

Open source license

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

itdavidhan/vue-fullpage.js