Single-page Scroll Plugin For Vue.js – vue-fullpage

Single-page Scroll Plugin For Vue.js – vue-fullpage

A Vue.js implementation of the fullscreen one page scrolling for your web applications.



A sigle-page scroll plugin based on vue.js


To achieve sigle-page scroll in mobile, support horizontal scroll and vertical scroll, support all the animation instructions of animate.css.

Online demo

here's a jsfiddle demo


npm install vue-fullpage --save

If you want use animate instruction, please install animate.css

npm install animate.css --save

animate.css usage


api document

getting started


Import the plugin of css and js file in main.js

import 'animate.css'
import 'vue-fullpage/vue-fullpage.css'
import VueFullpage from 'vue-fullpage'



fullpage-containerfullpage-wppageare default class name. Add the v-fullpage command to the page-wp container. Add the v-animate command to the page container.

<div class="fullpage-container">
  <div class="fullpage-wp" v-fullpage="opts">
    <div class="page-1 page">
      <p class="part-1" v-animate="{value: 'bounceInLeft'}">vue-fullpage</p>
    <div class="page-2 page">
      <p class="part-2" v-animate="{value: 'bounceInRight'}">vue-fullpage</p>
    <div class="page-3 page">
      <p class="part-3" v-animate="{value: 'bounceInLeft', delay: 0}">vue-fullpage</p>
      <p class="part-3" v-animate="{value: 'bounceInRight', delay: 600}">vue-fullpage</p>
      <p class="part-3" v-animate="{value: 'zoomInDown', delay: 1200}">vue-fullpage</p>


vue-fullpage value please refer to api document

export default {
  data() {
    return {
      opts: {
        start: 0,
        dir: 'v',
        duration: 500,
        beforeChange: function (prev, next) {
        afterChange: function (prev, next) {


Set the page-container container's width and height what do you want, and the v-fullpage command will adapt the width and height of the parent element. The following settings allow the scrolling page to fill the full screen.

.page-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

Github Repository

Tags: #VueJs