fullpage-vue

2.1.1 verified Mon Apr 27 auth: no javascript maintenance

fullpage-vue is a single-page scroll plugin for Vue 2.x that supports both mobile and PC. It provides fullscreen scrolling with options for horizontal/vertical direction, loop, animated transitions via animate.css integration, and callbacks (beforeChange, afterChange). Current stable version is 2.1.1. Release cadence is low, primarily maintenance. Key differentiators: lightweight, easy integration with Vue 2.x directives (v-fullpage, v-animate), and supports dynamic page updates ($update). However, the project appears unmaintained (last release in 2018) and lacks TypeScript definitions. Alternatives: vue-fullpage.js (active) or vue3-fullpage for Vue 3.

Common errors

error Cannot find module 'fullpage-vue' ↓

cause Package not installed or wrong import path.

fix

Run npm install fullpage-vue --save and import with import VueFullpage from 'fullpage-vue'.

error Property '$fullpage' does not exist on type 'Vue' ↓

cause Missing TypeScript definitions, or TypeScript project without declaration.

fix

Add a shim: declare module 'fullpage-vue' { const VueFullpage: any; export default VueFullpage; }

error fullpage.css not found ↓

cause Missing CSS import from package.

fix

Add import 'fullpage-vue/src/fullpage.css' in main.js.

error v-animate directive is not working ↓

cause animate.css not installed or not imported.

fix

Run npm install animate.css and import import 'animate.css' in main.js.

Warnings

deprecated The package is no longer actively maintained. Last release was in 2018. Vue 2.x only; not compatible with Vue 3. ↓

fix Consider using vue-fullpage.js or vue3-fullpage for new projects.

gotcha Missing peer dependency animate.css: The v-animate directive requires animate.css to be installed separately, but it's not listed as a peer dependency. ↓

fix Run `npm install animate.css --save` and import 'animate.css' in your main.js.

gotcha Dynamic pages require manual $update call: If you add/remove pages with v-for or v-if, the plugin does not automatically detect changes; you must call `this.$refs.example.$fullpage.$update()`. ↓

fix After modifying the page array, call $update on the fullpage reference.

breaking Package name changed from 'vue-fullpage' to 'fullpage-vue'? Potential confusion with scoped packages. Ensure correct import path. ↓

fix Use `import VueFullpage from 'fullpage-vue'`; do not import from 'vue-fullpage'.

Install

npm install fullpage-vue

yarn add fullpage-vue

pnpm add fullpage-vue

Imports

VueFullpage
wrong
```
const VueFullpage = require('fullpage-vue')
```
correct
```
import VueFullpage from 'fullpage-vue'
```
ESM only; CommonJS require may fail in bundlers. Use named import only for Vue 2.
v-fullpage directive
wrong
```
import { vFullpage } from 'fullpage-vue'
```
correct
```
Vue.use(VueFullpage) // then use v-fullpage in template
```
The directive is globally registered via Vue.use(). You cannot import it individually.

v-animate directive

wrong

import { vAnimate } from 'fullpage-vue'

correct

Vue.use(VueFullpage) // then use v-animate in template

Same as v-fullpage; registered globally by Vue.use().

Quickstart

Basic fullpage scroll setup with Vue 2.x, animate.css integration, and navigation button.

// main.js
import 'animate.css';
import 'fullpage-vue/src/fullpage.css';
import VueFullpage from 'fullpage-vue';
Vue.use(VueFullpage);

// App.vue
<template>
  <div class="fullpage-container">
    <div class="fullpage-wp" v-fullpage="opts">
      <div class="page page-1">
        <p v-animate="{value: 'bounceInLeft'}">Slide 1</p>
      </div>
      <div class="page page-2">
        <p v-animate="{value: 'bounceInRight'}">Slide 2</p>
      </div>
    </div>
    <button @click="$refs.fullpage.$fullpage.moveNext()">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      opts: {
        start: 0,
        dir: 'v',
        duration: 500
      }
    }
  }
}
</script>

<style>
.fullpage-wp { height: 100vh; overflow: hidden; }
.page { height: 100vh; display: flex; align-items: center; justify-content: center; }
</style>