Vue3 Fullpage | southcoastweb

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";
</script>

<template>
	<Vue3Fullpage>
		<section>Page One</section>
		<section>Page Two</section>
	</Vue3Fullpage>
</template>

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:

Prop	Type	Default	Description
active-colour	String	crimson	The CSS colour to use for the active navigation dot
navigation-size	String \| Number	1rem	The size of the navigation dots, accepts any CSS value
navigation-gap	String \| Number	0.5rem	The size of the gap between navigation dots, accepts any CSS value
navigation-colour	String	currentColor	Colour of the navigation dots
navigation-opacity-outer	Number	0.2	Opacity of the outer rings on the navigation dots
navigation-opacity-outer-hover	Number	0.3	Opacity of the navigation dot when hovered over
navigation-opacity-outer-active	Number	0.4	Opacity of the navigation dot when pressed
hide-navigation	Boolean	false	Don’t render the navigation sidebar (scroll navigation only)
model-value	Number	1	Reactive v-model value for the current page index (starting at 1)
prefix	String	page-	Prefix for generated page keys
tag	String	div	The HTML tag to use when rendering the page wrapper element
update-history	Boolean	false	Push the current page hash to the browser history
disable-classes	Boolean	false	Don’t apply any non-state-related classes to any components (for use with utility class frameworks).
page-class	String	<empty string>	Class string to apply to all page element
navigation-class	String	<empty string>	Class string to apply to the navigation element
navigation-dot-class	String	<empty string>	Class string to apply to navigation dots
navigation-dot-inner-class	String	<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.

Events

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

Event Name	Received Parameters	Description
update:modelValue	pageIndex: Number	The v-model event. Passes up the current page index (starting at 1)
page-enter	pageIndex: Number	Emitted when a page is navigated to
page-leave	pageIndex: Number	Emitted 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:

Don’t import vue3-fullpage/styles
Add the prop disable-classes to the <vue3-fullpage> component
Designate your own classes for rendering the various elements (see below)

<template>
	<vue3-fullpage 
		disable-classes 
		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>
	</vue3-fullpage>
</template>

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.