how to use fullpage in vue.js

hello i need help i use vue.js and i need "fullpage.js" but it is only supported for vue3

how can i use fullpage in vue.js?

alternatively how can I use pure JS?

here is my script so far in code:

<script>

import Bio from "../components/Bio.vue";
import Counter from "../components/Counter.vue";
import Gallery from "../components/Gallery.vue";
import About from "../components/About.vue";
import Clients from "../components/Clients.vue";
import Clientslogo from "../components/Clientslogo.vue";
import Services from "../components/Services.vue";
export default {
  name: "Home",
  components: { Bio, Counter, Gallery, About, Clients, Clientslogo, Services, },
  data() {
    return {
      welcomeScreen: {
        title: "Welcome!",
        blogPost:
          "Weekly blog articles with all things programming including HTML, CSS, JavaScript and more. Register today to never miss a post!",
        welcomeScreen: true,
        photo: "coding",
      },
    };
  },
  computed: {
    blogPostsFeed() {
      return this.$store.getters.blogPostsFeed;
    },
    blogPostsCards() {
      return this.$store.getters.blogPostsCards;
    },
    user() {
      return this.$store.state.user;
    },
  },
};
</script>

Solution

How to use fullpage.js in Vue.js 2.0

Fullpage.js is a JavaScript library that allows you to create fullscreen scrolling websites with ease. It has many features and options to customize the look and feel of your website. However, it is not designed to work with Vue.js out of the box, so you need to use some tricks to integrate it with your Vue.js 2 project.

The basic idea

The basic idea is to use a Vue component that wraps the fullpage.js library and exposes some props and events to communicate with it. You can use the vue-fullpage.js component, which is a Vue.js 2 wrapper for fullpage.js, or you can create your own component based on the same idea.

The component should have a template that contains a div element with the id of fullpage and a slot element to render the child components. The child components should have the class of section and optionally the data-anchor attribute to define the section name.

The component should also have a script that imports the fullpage.js library and initializes it with the options prop. The component should also watch the options prop for changes and update the fullpage.js instance accordingly. The component should also emit some events to notify the parent component about the fullpage.js actions, such as afterLoad, onLeave, afterRender, etc.

An example

Here is an example of how to use the vue-fullpage.js component in your Vue.js 2 project.

Install the vue-fullpage.js component

You can install the vue-fullpage.js component using npm or yarn:

npm install vue-fullpage.js --save
# or
yarn add vue-fullpage.js

Import the vue-fullpage.js component

You can import the vue-fullpage.js component in your main.js file or in your component file:

import Vue from 'vue'
import VueFullPage from 'vue-fullpage.js'

Vue.use(VueFullPage)

Use the vue-fullpage.js component

You can use the vue-fullpage.js component in your template like this:

<template>
  <div id="app">
    <full-page :options="options" @afterLoad="afterLoad" @onLeave="onLeave">
      <div class="section" data-anchor="firstPage">
        <h1>First Page</h1>
      </div>
      <div class="section" data-anchor="secondPage">
        <h1>Second Page</h1>
      </div>
      <div class="section" data-anchor="thirdPage">
        <h1>Third Page</h1>
      </div>
    </full-page>
  </div>
</template>

You can define the options prop in your data or computed properties like this:

<script>
export default {
  data() {
    return {
      options: {
        licenseKey: 'YOUR_LICENSE_KEY', // https://alvarotrigo.com/fullPage/extensions/requestKey.html
        navigation: true,
        anchors: ['firstPage', 'secondPage', 'thirdPage'],
        menu: '#menu',
        // other options
      },
    };
  },
};
</script>

You can also define some methods to handle the events emitted by the vue-fullpage.js component like this:

<script>
export default {
  methods: {
    afterLoad(origin, destination, direction) {
      console.log('After load: ' + destination.anchor);
    },
    onLeave(origin, destination, direction) {
      console.log('Leaving section: ' + origin.anchor);
    },
  },
};
</script>

Enjoy your fullscreen scrolling website

You can now enjoy your fullscreen scrolling website powered by fullpage.js and Vue.js 2. You can also customize the options and the events to suit your needs. For more information, you can check the documentation of fullpage.js and vue-fullpage.js.