{"id":21364,"library":"fullpage-vue","title":"fullpage-vue","description":"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.","status":"maintenance","version":"2.1.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vue","fullpage","rollup"],"install":[{"cmd":"npm install fullpage-vue","lang":"bash","label":"npm"},{"cmd":"yarn add fullpage-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add fullpage-vue","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM only; CommonJS require may fail in bundlers. Use named import only for Vue 2.","wrong":"const VueFullpage = require('fullpage-vue')","symbol":"VueFullpage","correct":"import VueFullpage from 'fullpage-vue'"},{"note":"The directive is globally registered via Vue.use(). You cannot import it individually.","wrong":"import { vFullpage } from 'fullpage-vue'","symbol":"v-fullpage directive","correct":"Vue.use(VueFullpage) // then use v-fullpage in template"},{"note":"Same as v-fullpage; registered globally by Vue.use().","wrong":"import { vAnimate } from 'fullpage-vue'","symbol":"v-animate directive","correct":"Vue.use(VueFullpage) // then use v-animate in template"}],"quickstart":{"code":"// main.js\nimport 'animate.css';\nimport 'fullpage-vue/src/fullpage.css';\nimport VueFullpage from 'fullpage-vue';\nVue.use(VueFullpage);\n\n// App.vue\n<template>\n  <div class=\"fullpage-container\">\n    <div class=\"fullpage-wp\" v-fullpage=\"opts\">\n      <div class=\"page page-1\">\n        <p v-animate=\"{value: 'bounceInLeft'}\">Slide 1</p>\n      </div>\n      <div class=\"page page-2\">\n        <p v-animate=\"{value: 'bounceInRight'}\">Slide 2</p>\n      </div>\n    </div>\n    <button @click=\"$refs.fullpage.$fullpage.moveNext()\">Next</button>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      opts: {\n        start: 0,\n        dir: 'v',\n        duration: 500\n      }\n    }\n  }\n}\n</script>\n\n<style>\n.fullpage-wp { height: 100vh; overflow: hidden; }\n.page { height: 100vh; display: flex; align-items: center; justify-content: center; }\n</style>","lang":"javascript","description":"Basic fullpage scroll setup with Vue 2.x, animate.css integration, and navigation button."},"warnings":[{"fix":"Consider using vue-fullpage.js or vue3-fullpage for new projects.","message":"The package is no longer actively maintained. Last release was in 2018. Vue 2.x only; not compatible with Vue 3.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Run `npm install animate.css --save` and import 'animate.css' in your main.js.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"After modifying the page array, call $update on the fullpage reference.","message":"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()`.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use `import VueFullpage from 'fullpage-vue'`; do not import from 'vue-fullpage'.","message":"Package name changed from 'vue-fullpage' to 'fullpage-vue'? Potential confusion with scoped packages. Ensure correct import path.","severity":"breaking","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run `npm install fullpage-vue --save` and import with `import VueFullpage from 'fullpage-vue'`.","cause":"Package not installed or wrong import path.","error":"Cannot find module 'fullpage-vue'"},{"fix":"Add a shim: `declare module 'fullpage-vue' { const VueFullpage: any; export default VueFullpage; }`","cause":"Missing TypeScript definitions, or TypeScript project without declaration.","error":"Property '$fullpage' does not exist on type 'Vue'"},{"fix":"Add `import 'fullpage-vue/src/fullpage.css'` in main.js.","cause":"Missing CSS import from package.","error":"fullpage.css not found"},{"fix":"Run `npm install animate.css` and import `import 'animate.css'` in main.js.","cause":"animate.css not installed or not imported.","error":"v-animate directive is not working"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}