FullPage

Installation

Terminal:

npm install --save vue-fullpage.js

Usage

import Vue from 'vue'
import fullPage from '@sheikhahmed/full-page';

Vue.use(fullPage);

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

HTML Elements

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

<div>
    <full-page :routes="routes">
        <div class="section">Section 1</div>
        <div class="section">Section 2</div>
        <div class="section">Section 3</div>
    </full-page>
</div>

OR 

<div>
    <full-page :routes="routes">
        <comp1></comp1>
        <comp2></comp2>
        <comp3></comp3>
    </full-page>
</div>

Timeout To Wait

You can set a timeout props - default is 50ms Example:

<div>
    <full-page timeout="150">
       ...
    </full-page>
</div>

Routes

You can set a routes array to push new route query param after scroll
Example:

new Vue({
  el: '#app',
  name: 'app',
  data() {
    return {
      routes: ['section1', 'section2', 'section3']
    }
  }
});

Move

You can move between slides by moveSectionDown - moveSectionUp - moveToSection Example:

<div>
    <full-page ref="fullpage">
        ...
    </full-page>
</div>

• To Move Down

<button class="next" @click="$refs.fullpage.moveSectionDown()">Next</button>

• To Move Up

<button class="prev" @click="$refs.fullpage.moveSectionUp()">Prev</button>

• To Move To Specific Index

<button class="to" @click="$refs.fullpage.moveToSection(3)">Move To Section 3</button>