GitHub - alvarotrigo/vue-fullpage.js: Official Vue.js wrapper for fullPage.js http://alvarotrigo.com/vue-fullpage/ (original) (raw)

Vue-fullpage.js - Official Vue.js 3 wrapper

preview

Official Vue.js 3 wrapper for the fullpage.js library.

vue-fullpage.js version

Table of contents

Installation

Terminal:

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

License

Commercial license

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]

Open source license

If you are creating an open-source application under a license compatible with the GNU 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.

Example

// With npm cd example/ npm install npm run start

Usage

Bundler (Vite)

import { createApp } from 'vue' import App from './App.vue'

import 'vue-fullpage.js/dist/style.css' import './fullpage.scrollHorizontally.min' // Optional. When using fullpage extensions import VueFullPage from 'vue-fullpage.js'

const app = createApp(App) app.use(VueFullPage) app.mount('#app')

Notice that when using the option scrollOverflow:true or any fullPage.js extension you'll have to include the file for those features before the vue-fullpage component.

Browser

You can check a browser stand-alone demo here.

Required HTML

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

First section ...
Second section ...

Options

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

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

Example:

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

Delayed init

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

Use the skipInit prop to stop full-page from initializing itself. You can do it when youself by using a ref like:

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

Methods

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

Example:

Next Section 1
Prev Section 2

Similar you can call any method of fullPage.js library directly on Javascript:

fullpage_api.setAllowScrolling(false)

Callbacks

As mentioned above you can pass callbacks through options object:

First section ...
Second section ...

Or you can use the standard approach for event handling of Vue.js:

....

Similarly, you can handle any event of the fullPage.js library. Just translate camelCase name of callback to kebab-case and use it ;)

Dynamic changes

vue-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:

//creating the section div var section = document.createElement('div') section.className = 'section' section.innerHTML = '

New Section

'

//adding section document.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()

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

For 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:

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

Usage with Nuxt.js

Use the nuxt-fullpage module in order to use Nuxt with vue-fullpage.js.

🚧 Usage with Gridsome

TBD

Contributing

Please see Contributing to fullpage.js

Resources