Repository files navigation

Official Vue.js 3 wrapper for thefullpage.js library.

• Codesandbox Demo
• fullpage.js Extensions
• By@imac2. Thanks toVasiliyGryaznoy ,dragg,Raphael Owino andJonathan Schneider.

• Vue-fullpage.js - Official Vue.js 3 wrapper
  • Table of contents
  • Installation
  • License
    • Commercial license
    • Open source license
  • Example
  • Usage
    • Bundler (Vite)
    • Browser
  • Required HTML
  • Options
    • Delayed init
  • Methods
  • Callbacks
  • Dynamic changes
  • Usage with Nuxt.js
  • 🚧 Usage with Gridsome
  • Automation
  • Contributing
• Resources

Terminal:

// With npmnpm install --save vue-fullpage.js

If 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]

If you are creating an open-source application under a license compatible with theGNU GPL license v3, you may use fullPage under the terms of the GPLv3.

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

Read more about fullPage's license.

// With npmcd example/npm installnpm run start

import{createApp}from'vue'importAppfrom'./App.vue'import'vue-fullpage.js/dist/style.css'import'./fullpage.scrollHorizontally.min'// Optional. When using fullpage extensionsimportVueFullPagefrom'vue-fullpage.js'constapp=createApp(App)app.use(VueFullPage)app.mount('#app')

Notice that when using the optionscrollOverflow:true or anyfullPage.js extension you'll have to include the file for those features before thevue-fullpage component.

You can check a browser stand-alone demohere.

<!-- On the page head --><linkrel="stylesheet"href="https://unpkg.com/vue-fullpage.js/dist/style.css"/><!-- Include after Vue (before closing body) --><scripttype="module"src="https://unpkg.com/vue-fullpage.js/dist/vue-fullpage.es.js"></script>

This wrapper creates a<full-page> component , which you can use like other Vue.js components. For example:

<div><full-pageref="fullpage":options="options"id="fullpage"><divclass="section">First section ...</div><divclass="section">Second section ...</div></full-page></div>

You can use anyoptions supported by fullPage.js library.Just pass the options object into this wrapper like Vue.js property.Options object can contain simpleoptions as well as fullPage.jscallbacks.

Notice that if you want to make use of the optionscrollOverflow:true, you'll have to include the scrollOverflow file before vue-fullpage.js, as detailedabove.

Example:

exportdefault{data(){return{options:{licenseKey:'YOUR_KEY_HERE',menu:'#menu',anchors:['page1','page2','page3'],sectionsColor:['#41b883','#ff5f45','#0798ec'],},}}}

Full-page will init itself automatically onmount. 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.

Use theskipInit prop to stop full-page from initializing itself. You can do it when youself by using aref like:

<full-pageref="fullpage":options="options":skip-init="true"></full-page>

methods:{// Called when your components are ready. That is up to you to decide when.componentsReady(){this.$refs.fullpage.init()}}

You can make use of any of themethods provided by fullPage.js by accessing the instance object via the reference$refs.fullpage.api.

Example:

<template><div><full-pageref="fullpage":options="options"><divclass="section"><buttonclass="next"@click="$refs.fullpage.api.moveSectionDown()">          Next</button>        Section 1</div><divclass="section"><buttonclass="prev"@click="$refs.fullpage.api.moveSectionUp()">          Prev</button>        Section 2</div></full-page></div></template>

Similar you can call any method of fullPage.js library directly on #"auto" data-snippet-clipboard-copy-content="fullpage_api.setAllowScrolling(false)">

fullpage_api.setAllowScrolling(false)

Callbacks

<template><div><full-pageref="fullpage":options="options"><divclass="section">First section ...</div><divclass="section">Second section ...</div></full-page></div></template><script>exportdefault{data(){return{options:{afterLoad:this.afterLoad,},}},methods:{afterLoad(){console.log("Emitted 'after load' event.")},},}</script>

<template><div><full-page@after-load="afterLoad"> ....</full-page></div></template><script>exportdefault{methods:{afterLoad(){          ...}}}</script>

Dynamic changes

//creating the section divvarsection=document.createElement('div')section.className='section'section.innerHTML='<h3>New Section</h3>'//adding sectiondocument.querySelector('#fullpage').appendChild(section)//where --> var vm = new Vue({...}) if calling it from outside.vm.$refs.fullpage.build()//or, when calling it from inside the Vue component methods:this.$refs.fullpage.build()

exportdefault{data(){return{options:{licenseKey:'YOUR_KEY_HERE',controlArrows:true,scrollBar:true,},}},}

Usage with Nuxt.js

🚧 Usage with Gridsome

Automation

Contributing

Resources