Official Vue.js wrapper for fullPage.js

Vue-fullpage.js

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

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.

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
        },
    }
});

Demo

See the Pen vue-fullpage.js - Official Vue.js wrapper component for fullPage.js by Álvaro (@alvarotrigo) on CodePen.

GitHub