Vue-fullpage.js

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

View demo Download Source

Terminal:

// With bower
bower install vue-fullpage.js

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

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

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

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");
        }
    }
});
JavaScript

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

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

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

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();
JavaScript

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

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

Demo

GitHub

alvarotrigo/vue-fullpage.js

1870254

Official Vue.js wrapper for fullPage.js http://alvarotrigo.com/vue-fullpage/ — Read More

Latest commit to the master branch on 1-19-2025
Download as zip