vaso2 / nuxt-fullpage.js Goto Github PK

<template>
  <div>
    <full-page :options="options" id="fullpage">
      <div class="section">
        <!-- <div class="Cell"> -->
        <h3>Section 1</h3>
        <!-- </div> -->
      </div>
      <div class="section">
        <div class="slide">
          <h3>Slide 2.1</h3>
        </div>
        <div class="slide">
          <h3>Slide 2.2</h3>
        </div>
        <div class="slide">
          <h3>Slide 2.3</h3>
        </div>
      </div>
      <div class="section">
        <h3>Section 3 !</h3>
      </div>
    </full-page>
  </div>
</template>

<script>
export default {
  layout: 'fullpage',
  data () {
    return {
      options: {
        licenseKey: 'api_key',
        afterLoad: this.afterLoad,
        scrollBar: false,
        menu: '#menu',
        navigation: true,
        anchors: ['page1', 'page2', 'page3'],
        sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9', '#b4b8ab']
      }
    }
  },
  
  methods: {
    afterLoad () {
    }
  }
}
</script>

export default {
  target: 'static',
  loading: true,
.....
plugins: [
    { src: '~/plugins/fullpage', mode: 'client', ssr: false },
    { src: '~plugins/vue-carousel.js', ssr: false } // Vue Carousel
    // { src: '~plugins/ga.js', ssr: false } // Google Analytics
  ],
}
...

import Vue from 'vue'
import Fullpage from 'vue-fullpage.js'
import 'fullpage.js/dist/fullpage.css'

Vue.use(Fullpage)

npm run generate
npm run start