[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8837":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":15,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":36,"readmeContent":37,"aiSummary":38,"trendingCount":16,"starSnapshotCount":16,"syncStatus":39,"lastSyncTime":40,"discoverSource":41},8837,"vue-fullpage.js","alvarotrigo\u002Fvue-fullpage.js","alvarotrigo","Official Vue.js wrapper for fullPage.js http:\u002F\u002Falvarotrigo.com\u002Fvue-fullpage\u002F","",null,"Vue",1875,250,31,1,0,20.2,"GNU General Public License v3.0",false,"master",true,[23,24,25,26,27,28,29,30,31,32,33,34,35],"fullpage","fullpagejs","fullscreen","javascript","mousewheel","onepage","scrolling","slideshow","snap","vue","vue-components","vue-wrapper","vuejs","2026-06-12 02:01:59","# Vue-fullpage.js - Official Vue.js 3 wrapper\n\n![preview](https:\u002F\u002Falvarotrigo.com\u002Fvue-fullpage\u002Fimgs\u002Fvue-fullpage-card.png)\n\n\u003Cp align=\"center\">\nOfficial Vue.js 3 wrapper for the \u003Ca target=\"_blank\" href=\"https:\u002F\u002Fgithub.com\u002Falvarotrigo\u002FfullPage.js\u002F\">fullpage.js library\u003C\u002Fa>.\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-fullpage.js\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fvue-fullpage.js\u002Flatest.svg\" alt=\"vue-fullpage.js version\" \u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n- [Codesandbox Demo](https:\u002F\u002Fcodesandbox.io\u002Fp\u002Fdevbox\u002Ft6fzdr?file=%2Findex.html)\n- [fullpage.js Extensions](https:\u002F\u002Falvarotrigo.com\u002FfullPage\u002Fextensions\u002F)\n- By [@imac2](https:\u002F\u002Ftwitter.com\u002Fimac2). Thanks to [VasiliyGryaznoy](https:\u002F\u002Fgithub.com\u002FVasiliyGryaznoy) , [dragg](https:\u002F\u002Fgithub.com\u002Fdragg), [Raphael Owino](https:\u002F\u002Ftwitter.com\u002Fralphowino) and [Jonathan Schneider](https:\u002F\u002Fgithub.com\u002FJonathanSchndr\u002F).\n\n## Table of contents\n\n- [Vue-fullpage.js - Official Vue.js 3 wrapper](#vue-fullpagejs---official-vuejs-3-wrapper)\n  - [Table of contents](#table-of-contents)\n  - [Installation](#installation)\n  - [License](#license)\n    - [Commercial license](#commercial-license)\n    - [Open source license](#open-source-license)\n  - [Example](#example)\n  - [Usage](#usage)\n    - [Bundler (Vite)](#bundler-vite)\n    - [Browser](#browser)\n  - [Required HTML](#required-html)\n  - [Options](#options)\n    - [Delayed init](#delayed-init)\n  - [Methods](#methods)\n  - [Callbacks](#callbacks)\n  - [Dynamic changes](#dynamic-changes)\n  - [Usage with Nuxt.js](#usage-with-nuxtjs)\n  - [:construction: Usage with Gridsome](#construction-usage-with-gridsome)\n  - [Automation](#automation)\n  - [Contributing](#contributing)\n- [Resources](#resources)\n\n## Installation\n\nTerminal:\n\n```bash\n\u002F\u002F With npm\nnpm install --save vue-fullpage.js\n```\n\n## License\n\n### Commercial license\nIf you want to use fullPage to develop nonopen sourced sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. This means, you won't have to change your whole application source code to an open-source license. [[Purchase a Fullpage Commercial License]](https:\u002F\u002Falvarotrigo.com\u002FfullPage\u002Fpricing\u002F)\n\n### Open source license\nIf you are creating an open-source application under a license compatible with the [GNU GPL license v3](https:\u002F\u002Fwww.gnu.org\u002Flicenses\u002Fgpl-3.0.html), you may use fullPage under the terms of the GPLv3.\n\n**You will have to provide a prominent notice that fullPage.js is in use. The credit comments in the JavaScript and CSS files should be kept intact** (even after combination or minification).\n\n[Read more about fullPage's license](https:\u002F\u002Falvarotrigo.com\u002FfullPage\u002Fpricing\u002F).\n\n## Example\n\n```bash\n\u002F\u002F With npm\ncd example\u002F\nnpm install\nnpm run start\n```\n\n## Usage\n\n### Bundler (Vite)\n\n```js\nimport { createApp } from 'vue'\nimport App from '.\u002FApp.vue'\n\nimport 'vue-fullpage.js\u002Fdist\u002Fstyle.css'\nimport '.\u002Ffullpage.scrollHorizontally.min' \u002F\u002F Optional. When using fullpage extensions\nimport VueFullPage from 'vue-fullpage.js'\n\nconst app = createApp(App)\napp.use(VueFullPage)\napp.mount('#app')\n```\n\nNotice that when using the option `scrollOverflow:true` or any [fullPage.js extension](https:\u002F\u002Falvarotrigo.com\u002FfullPage\u002Fextensions\u002F) you'll have to include the file for those features before the `vue-fullpage` component.\n\n### Browser\n\nYou can check a browser stand-alone demo [here](https:\u002F\u002Fgithub.com\u002Falvarotrigo\u002Fvue-fullpage.js\u002Ftree\u002Fmaster\u002Fdemos\u002Fstand-alone\u002F).\n\n```html\n\u003C!-- On the page head -->\n\u003Clink\n  rel=\"stylesheet\"\n  href=\"https:\u002F\u002Funpkg.com\u002Fvue-fullpage.js\u002Fdist\u002Fstyle.css\"\n\u002F>\n\n\u003C!-- Include after Vue (before closing body) -->\n\u003Cscript type=\"module\" src=\"https:\u002F\u002Funpkg.com\u002Fvue-fullpage.js\u002Fdist\u002Fvue-fullpage.es.js\">\u003C\u002Fscript>\n```\n\n## Required HTML\n\nThis wrapper creates a `\u003Cfull-page>` component , which you can use like other Vue.js components. For example:\n\n```html\n\u003Cdiv>\n  \u003Cfull-page ref=\"fullpage\" :options=\"options\" id=\"fullpage\">\n    \u003Cdiv class=\"section\">First section ...\u003C\u002Fdiv>\n    \u003Cdiv class=\"section\">Second section ...\u003C\u002Fdiv>\n  \u003C\u002Ffull-page>\n\u003C\u002Fdiv>\n```\n\n## Options\n\nYou can use any [options](https:\u002F\u002Fgithub.com\u002Falvarotrigo\u002FfullPage.js#options) supported by fullPage.js library.\nJust pass the options object into this wrapper like Vue.js property.\nOptions object can contain simple [options](https:\u002F\u002Fgithub.com\u002Falvarotrigo\u002FfullPage.js#options) as well as fullPage.js [callbacks](https:\u002F\u002Fgithub.com\u002Falvarotrigo\u002FfullPage.js#callbacks).\n\nNotice that if you want to make use of the option `scrollOverflow:true`, you'll have to include the scrollOverflow file before vue-fullpage.js, as detailed [above](https:\u002F\u002Fgithub.com\u002Falvarotrigo\u002Fvue-fullpage.js#bundler-webpack-rollup).\n\nExample:\n\n```javascript\nexport default {\n  data() {\n    return {\n      options: {\n        licenseKey: 'YOUR_KEY_HERE',\n        menu: '#menu',\n        anchors: ['page1', 'page2', 'page3'],\n        sectionsColor: ['#41b883', '#ff5f45', '#0798ec'],\n      },\n    }\n  }\n}\n```\n\n### Delayed init\n\nFull-page will init itself automatically on `mount`. This may not work properly when using async components inside its sections, as it has no way of knowing when said components are ready and mounted.\n\nUse the `skipInit` prop to stop full-page from initializing itself. You can do it when youself by using a `ref` like:\n\n```html\n\u003Cfull-page ref=\"fullpage\" :options=\"options\" :skip-init=\"true\">\u003C\u002Ffull-page>\n```\n\n```js\nmethods: {\n  \u002F\u002F Called when your components are ready. That is up to you to decide when.\n  componentsReady() {\n    this.$refs.fullpage.init()\n  }\n}\n```\n\n## Methods\n\nYou can make use of any of the [methods](https:\u002F\u002Fgithub.com\u002Falvarotrigo\u002FfullPage.js#methods) provided by fullPage.js by accessing the instance object via the reference `$refs.fullpage.api`.\n\nExample:\n\n```html\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cfull-page ref=\"fullpage\" :options=\"options\">\n      \u003Cdiv class=\"section\">\n        \u003Cbutton class=\"next\" @click=\"$refs.fullpage.api.moveSectionDown()\">\n          Next\n        \u003C\u002Fbutton>\n        Section 1\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"section\">\n        \u003Cbutton class=\"prev\" @click=\"$refs.fullpage.api.moveSectionUp()\">\n          Prev\n        \u003C\u002Fbutton>\n        Section 2\n      \u003C\u002Fdiv>\n    \u003C\u002Ffull-page>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\nSimilar you can call any method of fullPage.js library directly on Javascript:\n\n```javascript\nfullpage_api.setAllowScrolling(false)\n```\n\n## Callbacks\n\nAs mentioned [above](#options) you can pass callbacks through options object:\n\n```html\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cfull-page ref=\"fullpage\" :options=\"options\">\n      \u003Cdiv class=\"section\">First section ...\u003C\u002Fdiv>\n      \u003Cdiv class=\"section\">Second section ...\u003C\u002Fdiv>\n    \u003C\u002Ffull-page>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n  export default {\n    data() {\n      return {\n        options: {\n          afterLoad: this.afterLoad,\n        },\n      }\n    },\n\n    methods: {\n      afterLoad() {\n        console.log(\"Emitted 'after load' event.\")\n      },\n    },\n  }\n\u003C\u002Fscript>\n```\n\nOr you can use the standard approach for event handling of Vue.js:\n\n```html\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cfull-page @after-load=\"afterLoad\"> .... \u003C\u002Ffull-page>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\u003Cscript>\n  export default {\n      methods: {\n        afterLoad() {\n          ...\n        }\n      }\n    }\n\u003C\u002Fscript>\n```\n\nSimilarly, you can handle any [event](https:\u002F\u002Fgithub.com\u002Falvarotrigo\u002FfullPage.js#callbacks) of the fullPage.js library.\nJust translate camelCase name of callback to kebab-case and use it ;)\n\n## Dynamic changes\n\nvue-fullpage.js will watch all changes taking place within the fullpage.js options but will NOT automatically watch any DOM changes. If you want vue-fullpage.js to react to DOM changes call the `build()` method after making those changes. For example:\n\n```javascript\n\u002F\u002Fcreating the section div\nvar section = document.createElement('div')\nsection.className = 'section'\nsection.innerHTML = '\u003Ch3>New Section\u003C\u002Fh3>'\n\n\u002F\u002Fadding section\ndocument.querySelector('#fullpage').appendChild(section)\n\n\u002F\u002Fwhere --> var vm = new Vue({...}) if calling it from outside.\nvm.$refs.fullpage.build()\n\n\u002F\u002For, when calling it from inside the Vue component methods:\nthis.$refs.fullpage.build()\n```\n\nIn order for fullPage.js to get updated after a change in any of the fullPage.js options, you'll have to make sure to use such an option in the initialization.\n\nFor example, if we want fullPage.js to get updated whenever I change the `scrollBar` and `controlArrows` options, I'll have to use the following initialisation:\n\n```js\nexport default {\n  data() {\n    return {\n      options: {\n        licenseKey: 'YOUR_KEY_HERE',\n        controlArrows: true,\n        scrollBar: true,\n      },\n    }\n  },\n}\n```\n\n## Usage with Nuxt.js\n\nUse the [nuxt-fullpage](https:\u002F\u002Fgithub.com\u002Falvarotrigo\u002Fnuxt-fullpage) module in order to use Nuxt with vue-fullpage.js.\n\n## :construction: Usage with Gridsome\n\nTBD\n\n## Automation\n\nThis repository includes automated GitHub Actions for keeping fullPage.js up-to-date. See [`.github\u002FWORKFLOWS.md`](.github\u002FWORKFLOWS.md) for detailed documentation.\n\n## Contributing\n\nPlease see [Contributing to fullpage.js](https:\u002F\u002Fgithub.com\u002Falvarotrigo\u002FfullPage.js\u002Fwiki\u002FContributing-to-fullpage.js)\n\n# Resources\n\n- [Wordpress theme](https:\u002F\u002Falvarotrigo.com\u002FfullPage\u002Futils\u002Fwordpress.html)\n- [fullpage.js Extensions](https:\u002F\u002Falvarotrigo.com\u002FfullPage\u002Fextensions\u002F)\n- [WordPress Plugin for Elementor](https:\u002F\u002Falvarotrigo.com\u002FfullPage\u002Fwordpress-plugin-elementor\u002F)\n- [WordPress Plugin for Gutenberg](https:\u002F\u002Falvarotrigo.com\u002FfullPage\u002Fwordpress-plugin-gutenberg\u002F)\n- [CSS Easing Animation Tool - Matthew Lein](http:\u002F\u002Fmatthewlein.com\u002Fceaser\u002F) (useful to define the `easingcss3` value)\n- [fullPage.js cdnJS CDN](https:\u002F\u002Fcdnjs.com\u002Flibraries\u002FfullPage.js)\n\n\n\n\u003C!-- Badges -->\n[npm-version-src]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fvue-fullpage.js\u002Flatest.svg\n[npm-version-href]: https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvue-fullpage.js\n","vue-fullpage.js 是一个专为 Vue.js 3 设计的 fullPage.js 库的官方封装。它提供了创建全屏滚动网站的能力，支持鼠标滚轮、触摸事件和键盘导航等交互方式，使得开发单页或多页滚动效果的应用变得更加简单高效。该项目利用了 Vue 的组件化特性，使得开发者可以轻松地通过配置选项来定制页面布局和过渡效果。适用于需要构建具有视觉吸引力且用户体验流畅的网页应用场合，比如产品展示、个人简历或创意项目网站等。",2,"2026-06-11 03:19:56","top_language"]