Vue3 Fullpage

Part of southcoastweb's contribution to Free and Open Source Software (FOSS)

To read more about southcoastweb and our open-source software, go to our Open-Source page.

VersionLicenseMonthly DownloadsMonthly Downloads

One of the main problems with wrapping JavaScript libraries for use in a Vue application is their reliance on browser APIs like `createElement` and `querySelector`. Some older ones might even be dependent on jQuery, which is a lot of semi-obsolete code to be including to gain relatively simple functionality in your add.

That’s why we made Vue 3 Fullpage, a full page scroller that’s built from the ground up in Vue to ensure universal compatibility in dev, production and SSR contexts. It’s also provided as FOSS, so there’s that too.

Getting Started

Vue3 Fullpage is provided as a component, so no app installation is necessary, instead just install and import like so:

npm i vue3-fullpage
# or
yarn add vue3-fullpage

and then import inside your component

<script setup>
import "vue3-fullpage/styles";
import { Vue3Fullpage } from "vue3-fullpage";
<section>Page One</section>
<section>Page Two</section>

Note that you only have to import the stylesheet once, so inside your entry file might be a better fit. Or you may choose not to install it at all (see below).

Component Props

The props that can be passed to the <vue3-fullpage> component are:

active-colourStringcrimsonThe CSS colour to use for the active navigation dot
navigation-sizeString | Number1remThe size of the navigation dots, accepts any CSS value
navigation-gapString | Number0.5remThe size of the gap between navigation dots, accepts any CSS value
navigation-colourStringcurrentColorColour of the navigation dots
navigation-opacity-outerNumber0.2Opacity of the outer rings on the navigation dots
navigation-opacity-outer-hoverNumber0.3Opacity of the navigation dot when hovered over
navigation-opacity-outer-activeNumber0.4Opacity of the navigation dot when pressed
hide-navigationBooleanfalseDon’t render the navigation sidebar (scroll navigation only)
model-valueNumber1Reactive v-model value for the current page index (starting at 1)
prefixStringpage-Prefix for generated page keys
tagStringdivThe HTML tag to use when rendering the page wrapper element
update-historyBooleanfalsePush the current page hash to the browser history
disable-classesBooleanfalseDon’t apply any non-state-related classes to any components (for use with utility class frameworks).
page-classString<empty string>Class string to apply to all page element
navigation-classString<empty string>Class string to apply to the navigation element
navigation-dot-classString<empty string>Class string to apply to navigation dots
navigation-dot-inner-classString<empty string>Class string to apply to the inner element of navigation dots

Each HTML element passed to the component will be treated as a page. If you use an id tag on these pages, it will be used as the key/hash for navigation. Otherwise, your prefix will be used with the page’s numerical index.


You can listen to the following events on the Vue3 Fullpage component:

Event NameReceived ParametersDescription
update:modelValuepageIndex: NumberThe v-model event. Passes up the current page index (starting at 1)
page-enterpageIndex: NumberEmitted when a page is navigated to
page-leavepageIndex: NumberEmitted when a page is navigated away from

Using with Utility Class Frameworks

If you’re using something like Tailwind, you may want to disable the built-in styles/classes and use your own. Here’s how to do that:

  1. Don’t import vue3-fullpage/styles
  2. Add the prop disable-classes to the <vue3-fullpage> component
  3. Designate your own classes for rendering the various elements (see below)
class="w-full h-screen overflow-y-auto relative m-0 p-0 snap-y snap-mandatory"
page-class="w-full h-full snap-start"
navigation-class="fixed top-1/2 -translate-y-1/2 right-0 p-4 flex flex-col gap-y-2"
navigation-dot-class="relative flex justify-center items-center p-1.5 overflow-hidden rounded-full cursor-pointer"
navigation-dot-inner-class="bg-blue-700 w-4 h-4 rounded-full"
<section id="introduction">Intro</section>
<section id="about-us">About Us</section>
<section id="our-clients">Our Clients</section>
<section id="contact-us">Contact Us</section>

Questions / Comments ?

If you’ve got any questions, issues or suggestions about this open-source project, feel free to post them at the GitHub repository.

Copyright 2007 - 2024 southcoastweb is a brand of DSM Design.