Problems with the fullpage.js slider - html

Question

I have been stuck on this problem for hours and I cant seem to find my answer anywhere on the net... I am working on a vue-cli app, and I am using fullpage.js component with vue.js. I am attempting to create a landscape slider on one section. So far, I followed the instructions on this documentation:
https://github.com/alvarotrigo/fullPage.js#creating-links-to-sections-or-slides
but the slider does not work.
the following is my main.js:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import BootstrapVue from 'bootstrap-vue'
import Carousel3d from 'vue-carousel-3d'
import VueFullPage from 'vue-fullpage.js'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import './assets/css/style.css';
Vue.config.productionTip = false
Vue.use(BootstrapVue);
Vue.use(Carousel3d);
Vue.use(VueFullPage);
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>',
router,
store
})
the following is the vue component I am trying to use this feature on:
<template>
<full-page ref="fullpage" id="fullpage" class="Gallery">
<section class="section">
<div class="slide">
slide 1
</div>
<div class="slide">
slide 2
</div>
</section>
</full-page>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
data(){
return {
half_of_images:Math.ceil(this.$store.state.images.length / 2),
images: this.$store.state.images,
options:{
licenseKey:null,
slidesNavigation: true
}
}
}
}
</script>
<style>
.col , .col > img{
padding:0px !important;
}
.col > img {
border: .5px solid white;
position:relative;
}
</style>

Answer 1

From the docs, https://github.com/alvarotrigo/vue-fullpage.js#bundler-webpack-rollup
Also, you'll have to add the fullPage CSS file (fullpage.min.css). Is up to you how you add it. You can add it on the HTML page or bundle it with other CSS files, or import it with Javascript.
You can do this with an import statement in your vue component
import "fullpage.js/dist/fullpage.css";