fullpage-vue

library2.1.1jsnpmunverified

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.

web-framework

npm install fullpage-vue

package ↗

INSTALL

IMPORT

SIG · FULLPAGE-VUE

fullpage-vue

web-frameworkjavascriptv2.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueFullpage

✓ import VueFullpage from 'fullpage-vue'

✗ const VueFullpage = require('fullpage-vue')

ESM only; CommonJS require may fail in bundlers. Use named import only for Vue 2.

v-fullpage directive

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

✗ import { vFullpage } from 'fullpage-vue'

The directive is globally registered via Vue.use(). You cannot import it individually.

v-animate directive

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

✗ import { vAnimate } from 'fullpage-vue'

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

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>

Debug

Known issues

deprecatedThe 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.

affects: >=2.0.0

gotchaMissing 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.

affects: >=2.0.0

gotchaDynamic 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.

affects: >=2.0.0

breakingPackage 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'.

affects: >=2.0.0

Errors

Common errors & fixes

Cannot find module 'fullpage-vue'

Package not installed or wrong import path.

fix

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

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

Missing TypeScript definitions, or TypeScript project without declaration.

fix

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

fullpage.css not found

Missing CSS import from package.

fix

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

v-animate directive is not working

animate.css not installed or not imported.

fix

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

Upgrade

Version history

2.1.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

5 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/fullpage-vue ↗