Official Vue.js wrapper for the fullpage.js library.

Last update: Aug 11, 2022

Vue-fullpage.js

preview

Official Vue.js wrapper for the fullpage.js library.

fullPage.js version

Table of contents

  1. Installation
  2. License
  3. Usage
  4. Options
  5. Methods
  6. Callbacks
  7. Usage with Nuxt.js
  8. Usage with Gridsome
  9. Contributing
  10. Resources

Installation

Terminal:

// With bower
bower install vue-fullpage.js

// With npm
npm install --save vue-fullpage.js

License

Non open source license

If you want to use vue-fullpage to develop non open sourced sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Which means, you won't have to change your whole application's source code to an open source license. Purchase a Fullpage Commercial License.

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use fullPage under the terms of the GPLv3.

The credit comments in the JavaScript and CSS files should be kept intact (even after combination or minification)

Read more about fullPage's license.

Usage

Bundler (Webpack, Rollup)

You can check a bundle demo here.

import Vue from 'vue'
import 'fullpage.js/vendors/scrolloverflow' // Optional. When using scrollOverflow:true
import './fullpage.scrollHorizontally.min' // Optional. When using fullpage extensions
import VueFullPage from 'vue-fullpage.js'

Vue.use(VueFullPage);

new Vue({
  el: '#app',
  render: h => h(App)
});

Notice that when using the option scrollOverflow:true or any fullPage.js extension you'll have to include the file for those features before the vue-fullpage component.

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.

Browser

You can check a browser stand alone demo here.

">

<link rel="stylesheet" href="https://unpkg.com/fullpage.js/dist/fullpage.min.css">


<script src="https://unpkg.com/vue-fullpage.js/dist/vue-fullpage.min.js">script>

Required HTML

This wrapper creates a component , which you can use like other Vue.js components. For example:

First section ...
Second section ...
">
<div>
    <full-page ref="fullpage" :options="options" id="fullpage">
    <div class="section">
      First section ...
    div>
    <div class="section">
      Second section ...
    div>
  full-page>
div>

Options

You can use any options supported by fullPage.js library. Just pass options object into this wrapper like Vue.js property. Options object can contain simple options as well as fullPage.js callbacks.

Notice that if you want to make use of the option scrollOverflow:true, you'll have to include the scrollOverflow file before vue-fullpage.js, as detailed above.

Example:

new Vue({
  el: '#app',
  name: 'app',
  data() {
    return {
      options: {
        licenseKey: 'YOUR_KEY_HEERE',
        menu: '#menu',
        anchors: ['page1', 'page2', 'page3'],
        sectionsColor: ['#41b883', '#ff5f45', '#0798ec']
      },
    }
  }
});

Delayed init

Full-page will init itself automatically on mount. This may not work properly when using async components to inside it's sections, as it has no way of knowing when said components are ready and mounted.

Use the skipInit prop to stop full-page from initializing itself. You can do it when youself by using a ref like:

">
<full-page ref="fullpage" :options="options" :skip-init="true">
methods: {
  // Called when your components are ready. That is up to you to decide when.
  componentsReady() {
    this.$refs.fullpage.init()
  }
}

Methods

You can make use of any of the methods provided by fullPage.js by accessing the instance object via the a reference $refs.fullpage.api.

Example:

Section 1
Section 2
">
<template>
  <div>
    <full-page ref="fullpage" :options="options">
      <div class="section">
        <button class="next" @click="$refs.fullpage.api.moveSectionDown()">Nextbutton>
        Section 1
      div>
      <div class="section">
        <button class="prev" @click="$refs.fullpage.api.moveSectionUp()">Prevbutton>
        Section 2
      div>
    full-page>
  div> template>

Similar you can call any method of fullPage.js library directly on Javascript:

fullpage_api.setAllowScrolling(false);

Callbacks

As mentioned above you can pass callbacks through options object:

First section ...
Second section ...
">
<template>
  <div>
    <full-page ref="fullpage" :options="options">
      <div class="section">
        First section ...
      div>
      <div class="section">
        Second section ...
      div>
    full-page>
  div>
template>

<script>
  export default {
      data() {
        return {
          options: {
            afterLoad: this.afterLoad,
          }
        }
      },

      methods: {
        afterLoad() {
          console.log("Emitted 'after load' event.");
        }
      }
    }
script>

Or you can use the standard approach for event handling of Vue.js:

....
">
<template>
  <div>
    <full-page @after-load="afterLoad">
        ....
    full-page>
  div>
template>
<script>
  export default {
      methods: {
        afterLoad() {
          ...
        }
      }
    }
script>

Similar you can handle any event of fullPage.js library. Just translate camelCase name of callback to kebab-case and use it ;)

Dynamic changes

vue-fullpage.js will watch all changes taking place within the fullpage.js options but will NOT automatically watch any DOM changes. If you want vue-fullpage.js to react to DOM changes call the build() method after making those changes. For example:

//creating the section div
var section = document.createElement('div');
section.className = 'section';
section.innerHTML = '

New Section

'
; //adding section document.querySelector('#fullpage').appendChild(section); //where --> var vm = new Vue({...}) if calling it from outside. vm.$refs.fullpage.build(); //or, when calling it from inside the Vue component methods: this.$refs.fullpage.build();

In order for fullPage.js to get updated after a change in any of the fullPage.js options, you'll have to make sure to use such option in the initialisation.

For example, if we want fullPage.js to get updated whenever I change the scrollBar and controlArrows options, I'll have to use the following initialisation:

<script>
  export default {
    data() {
      return {
        options: {
          licenseKey: 'YOUR_KEY_HERE',
          controlArrows: true,
          scrollBar: true
        },
      }
    },
  }
script>

Or, if using new Vue, use an object instead of a function for the data property:

new Vue({
    el: '#app',
    data: {
        options: {
          licenseKey: 'YOUR_KEY_HERE',
          controlArrows: true,
          scrollBar: true
        },
    }
});

Usage with Nuxt.js

Before using using Fullpage.js with Nuxt, keep in mind there will always be some drawbacks. Nuxt is a server side rendered framework, thus the browser is not available at render time, something Fullpage relies on for its magic to happen. There are however, ways to go partially around this. There are two setup options: use nuxt-fullpage.js plugin or make such a plugin if needed by your specific requirements.

Using a nuxt-fullpage.js plugin

  • Add nuxt-fullpage.js dependency using yarn or npm to your project
// With npm
npm install --save nuxt-fullpage.js
  • Add nuxt-fullpage.js to modules section of nuxt.config.js
{
  modules: [
    'nuxt-fullpage.js',
 ]
}

That's all, you're ready to go. Also you can find additional info about plugin in docs

Defining your own Nuxt plugin

Create a file called fullpage.js inside your Nuxt plugins folder. Should look something like this:

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

Vue.use(Fullpage)

Now inside your nuxt.config.js, define your fullpage plugin file inside the plugins key like so:

  plugins: [
    { src: '~/plugins/fullpage', mode: 'client' }
  ],

Note the mode: 'client' option. Not adding this option will cause errors during render time. This option means Nuxt will not render fullpage on the server, rather skip it and run it in the Browser.

Opening the browser you will see Fullpage is working.

You will however get a warning in the console saying:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside 

, or missing . Bailing hydration and performing full client-side render.

This is normal, nuxt did not render Fullpage at server render time, but then on mount in the Browser, Fullpage kicks in, changing the DOM. The good part is the content inside the fullpage component (each section) will be present at server render time, which means search engine crawlers will be able to detect it.

Using component

If you do not want to see that warning and you do not care about search engnes, you can wrap your fullpage component inside a tag like so:

This content will only be visibe on browser render, not server render
">

   

Usage with Gridsome

Gridsome first renders websites statically with Node.js, which means that the browser environment isn't available at render time. Fullpage requires a browser environment to work, which causes nuxt build to fail. You can work around this by only loading Fullpage in the browser, and ignoring it during pre-rendering. In your main.js file, the exported function exposes an isClient variable. You can use it to load Fullpage only when you're in a client environment.

export default function(Vue, { isClient }) {
  if (isClient) {
    const { default: VueFullPage } = require('vue-fullpage.js')
    Vue.use(VueFullPage)
  }
})

Then, in your layouts, templates, or pages that use Fullpage, make sure to wrap the code that uses the plugin with the ClientOnly component.

First section ...
Second section ...
">
<template>
  <Layout>
    <ClientOnly>
      <full-page ref="fullpage" :options="options" id="fullpage">
        <div class="section">First section ...div>
        <div class="section">Second section ...div>
      full-page>
    ClientOnly>
  Layout>
template>

Contributing

Please see Contributing to fullpage.js

Resources

GitHub

https://github.com/alvarotrigo/vue-fullpage.js/
Comments
  • 1. Any way to delay fullpage's destroy method until after router leave transition completes?

    I'm currently using transitions between routes in Vue/Nuxt, and the leaving component containing a Fullpage.js subcomponent is destroyed before my leave transition completes. This causes all styles to be removed from fullpage component whilst still visible, and looks bad.

    Is there the ability to override the fullpage destroy call in the components lifecycle method, and manually call it after the leave transition is complete?

    Reviewed by alexhillel at 2018-11-27 17:22
  • 2. No Touch Navigation after Route Change

    Description

    On sites build with vue js you can only use touch device's swipe-navigation on first route. If you change the route (via vue-router), no touch events are working anymore. - Normal section switching per buttons is still working correctly. On non-touch devices everything is working fine (except on IE/Edge, but that's another issue). You can try it on iOS or in your desktop browser with activated/emulated touch.

    Steps to reproduce it

    • [x] create vue js project with vue router and vue jullpage js
    • [x] create router-view and some components to switch between per router-view
    • [x] components have multiple other components/divs, wrapped by fullpage
    • [x] there is only one fullpage working at the same time, due to no keep-alive

    It seems, the touch-events/listeners were not correctly destroyed on route-change?

    Versions

    "vue-fullpage.js": "0.0.5", "vue": "2.5.17", "vue-router": "3.0.1", Tested on FF-DevEd 64.0b2, Safari 12.0 (Both MacOS 10.13.6), iPad 5 (iOS 11.1) & 6 (iOS 12), LG V20, Kindle Fire, Samsung Tab (div. Android)

    Reviewed by MerryMacMapface at 2018-10-29 08:18
  • 3. SSR Fixes

    Description

    This is a potential fix to the SSR problems.

    I am getting however other issues now. The bundling of fullpage.js into the vue components is causing problems in Nuxt. It is trying to use the UMD file, which does not work at all. The Commonjs bundle is just pointless.

    I however tried to copy paste an untranspiled FullPage.vue and FullPagePlaceholder.vue into a nuxt project directly and created two plugins. That turns out to work perfectly fine.

      plugins: [
        { src: '~/plugins/fullpage/fullpage.server.js' },
        { src: '~/plugins/fullpage/fullpage.client.js' },
      ],
    
    // fullpage.client.js
    import Vue from 'vue'
    import 'fullpage.js/dist/fullpage.css'
    import FullPage from './FullPage'
    
    Vue.component('full-page', FullPage)
    
    // fullpage.server.js
    import Vue from 'vue'
    import FullPage from './FullPagePlaceholder'
    
    Vue.component('full-page', FullPage)
    

    Edit

    Or just use https://www.npmjs.com/package/fullpage-nuxt-module

    Reviewed by dobromir-hristov at 2020-03-13 07:29
  • 4. How can I import FullPage component properly?

    Hello, alvarotrigo. I use vue-fullpage.js in my project and follow your Basic usage guide. But I always get errors.

    Following is my code:

    index.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>demo</title>
        <link rel="stylesheet" href="./static/fullpage.js/jquery.fullpage.min.css">
      </head>
      <body>
        <div id="app"></div>
        <script src="./static/jquery/jquery.min.js"></script>
        <script src="./static/fullpage.js/jquery.fullpage.min.js"></script>
        <script src="/dist/build.js"></script>
      </body>
    </html>
    

    App.vue

    <template>
      <full-page :options="options">
          <div class="section">
            section 1
          </div>
          <div class="section">
            section 2
          </div>
        </full-page>
    </template>
    
    <script>
    import FullPage from 'vue-fullpage.js/src/FullPage';
    import fullPageMixin from 'vue-fullpage.js/src/fullPageMixin';
    
    export default {
      name: 'app',
    
      mixins: [fullPageMixin],
    
      components: {
        FullPage,
      },
    
      data() {
        return {
          options: {},
        };
      },
    }
    </script>
    
    <style scoped>
    
    </style>
    

    then it will cause:

    Module build failed: Error: Couldn't find preset "es2015" relative to directory "/path/to/node_modules/vue-fullpage.js"
    

    I just don't want to use Vue.component. Can you tell me what I am doing wrong? Thanks a lot.

    Reviewed by yangkean at 2018-02-07 04:12
  • 5. Vue component is not replaced with template when using nuxt generate

    The <full-page> component is not replaced with <div> element in the template when running nuxt generate.

    This can be replicated with a basic setup following instructions for Nuxt.js and instructions for Vue-fullpage.js and running nuxt generate.

    The <full-page> component is rendered correctly if just running nuxt in universal mode, so it works fine during development.

    The <full-page> component is also rendered correctly if running nuxt generate while nesting the component in a <no-ssr> component, but as described in the installation instructions, this has negative SEO implications.

    Node.js v10.15.3 Nuxt.js v2.6.1 Vue-fullpage.js v0.1.2

    Reviewed by ramiroazar at 2019-04-08 00:15
  • 6. Best way to conditionally show something after navigating to a section?

    Each of my sections are handled by a separate component (Page) e.g:

    App:
     - Page
     - Page
     - etc
    

    Tapping into the afterLoad callback in the App component is fine, I can establish the index of the current Page and pass that info down no problem. But, when I try to conditionally show something within a Page component, based on that info, it never shows. It's as if Page is no longer reacting to the change once it's mounted.

    Am I approaching this correctly? What is the best way to go about this sort of thing?

    UPDATE: See https://github.com/alvarotrigo/vue-fullpage.js/issues/163#issuecomment-600844962 for better explanation and working example.

    Reviewed by danbohea at 2020-03-18 17:18
  • 7. Conditional custom component are dissapearing

    <template>
        <div id="app">
            <full-page ref="fullpage" :options="{}">
                <div class="section">
                    <customA v-if="game"></customA>
                    <customB v-else></customB>
                    {{ game }}
                    <button @click="changeGame">Test</button>
                    <button @click="rebuild">rebuild</button>
                </div>
            </full-page>
        </div>
    </template>
    
    <script>
      export default {
        name: 'app',
        data: () => ({
          game: false
        }),
        methods: {
          changeGame() {
            this.game = !this.game;
          },
          rebuild() {
            this.$refs.fullpage.api.reBuild();
          }
        }
      }
    </script>
    
    • CustomA, CustomB are just components with p with some random text

    When I click on the Test button (change value of this.game), the custom component disappears and never shows again. Initially, I found this issue when I put router-view inside fullpage component and I got Vue error.

    Also, is it possible to put router-view inside fullpage component without problems?

    Reviewed by kristijan97 at 2019-11-20 16:45
  • 8. Scrolloverflow with nuxt ssr

    I currently have the issue that scrolloverflow doesn't work if the fullpage component isn't wrapped inside no-ssr. It works when running the dev server but in production mode I am not able to scroll to any other section. Maybe that's a limitation with using scrolloverflow but I hope there is some way around it with using SSR, cause the no-ssr option would defeat the purpose of using nuxt in the first place as SEO will suffer.

    Reviewed by ZerNico at 2019-06-06 11:08
  • 9. fullpage is not defined

    Hi there! Iam still new to Vue and Fullpage, after the fix Iam using "vue-fullpage.js": "0.0.3",

    I want the FullpageJS only on one site (Index.vue) and not on all the other sites. So the localhost starts, but inside the browser i get that error message :"

    bundle.js:73787 Uncaught ReferenceError: fullpage is not defined at Object.disposed (bundle.js:73787) at webpack_require (bundle.js:69868) at Object.module.exports (bundle.js:73972) at webpack_require (bundle.js:69868) at bundle.js:69914 at bundle.js:69917 at webpackUniversalModuleDefinition (bundle.js:69841) at Object.render (bundle.js:69848) at webpack_require (bundle.js:20) at Object. (bundle.js:22093)

    I tried the Demo which was uploaded here and a different way like this Tutorial ( https://github.com/cheulong/vue-fullpage-scroll) but both seem to throw the same error.

    Can you support me with integrating it?

    My code looks as followed:

    Main.js

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import VueVideoPlayer from 'vue-video-player'
    import $ from 'jquery';
    import 'bootstrap/dist/js/bootstrap.min.js'
    import VueFullPage from 'vue-fullpage.js'
    import './assets/js/global.js'
    import 'video.js/dist/video-js.css'
    
    import App from './components/App.vue'
    import About from './components/Sites/About.vue'
    import Consult from './components/Sites/Consult.vue'
    import Contact from './components/Sites/Contact.vue'
    import Customers from './components/Sites/Customers.vue'
    import Msgpia from './components/Sites/Msgpia.vue'
    import Index from './components/Sites/Index.vue'
    
    Vue.use(VueVideoPlayer)
    Vue.use(VueRouter)
    Vue.use(VueFullPage)
    
    const routes = [
     {
         name: 'About',
         path: '/about',
         component: About
     },
     {
         name: 'Index',
         path: '/index',
         component: Index
     },
     {
         name: 'App',
         path: '/',
         component: App,
         redirect: '/index'
     },
     {
        name: 'Consult',
        path: '/consult',
        component: Consult
    },
    {
       name: 'Contact',
       path: '/contact',
       component: Contact
    },
    {
       name: 'Customers',
       path: '/customers',
       component: Customers
    },
    {
       name: 'Msgpia',
       path: '/msgpia',
       component: Msgpia
    }
    ];
    
    var router = new VueRouter({
      mode: 'history',
      linkActiveClass: 'active',
      routes: routes
    });
    
    new Vue(Vue.util.extend({ router }, App)).$mount('#app')
    

    index.html

    <!DOCTYPE html>
    <html lang="de" dir="ltr">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge; IE=11">
        <link rel="icon" type="image/vnd.microsoft.icon" href="logo-small.ico">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.1/fullpage.min.css">
    
        <!--[if IE 9]>
        <script>window.alert("Your IE Version is not supported. Please update to Version 10 or higher")</script>
        <![endif]-->
        <!--[if lte IE 8]>
        <script>window.alert("Your IE Version is not supported. Please update to Version 10 or higher")</script>
        <![endif]-->
        <!--[if IE 7]>
        <script>window.alert("Your IE Version is not supported. Please update to Version 10 or higher")</script>
        <![endif]-->
        <title>My Homepage</title>
      </head>
      <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
      </body>
    </html>
    
    

    Index.vue

    <template lang="html">
        <div id="fullpage" class="bgWhite">
            <full-page :options="options">
          <!-- erste Seite -->
          <div data-anchor="home" class="section container-fluid backgroundSurf">
              <div id="slide1" class="h-100 position-relative">
                  <logo-small></logo-small>
    
                  <div class="row">
                      <div id="slide1h1" class="col-sm-8">
                          <h1>Passion <br> für Versiche-rungssysteme</h1>
                      </div>
                  </div>
                  <div class="row pt-5">
                      <div class="offset-sm-1 col-sm-11 col-md-11 col-xl-8 textbox">
                          <p><span class="upperC">VERSICHERUNGS KNOW HOW | BERATUNG |</span></p>
                          <p><span class="upperC">USER EXPERIENCE& INTERFACE DESIGN |</span></p>
                          <p><span class="upperC">SOFTWARE DEVELOPING | msg.PIA |</span></p>
                          <p><span class="upperC">MALS | TIME2MARKET |  msg.CIA |</span></p>
                      </div>
                  </div>
              </div>
          </div>
          <!-- erste Seite Ende -->
          <!-- zweite seite -->
          <div data-anchor="msgpia" class="section container-fluid bgGrey">
              <div id="slide2" class="h-100 position-relative">
                  <logo-small></logo-small>
    
                  <div class="row">
                      <div id="slide2h1" class="offset-xs-1 col-xs-8">
                          <h1 class="init">msg.PIA</h1>
                      </div>
                  </div>
                  <div class="row d-flex">
                      <div class="offset-xs-1 col-sm-10  col-md-10 col-lg-8 col-xl-6 textbox" style="align-self: center;">
                          <p><span class="upperC">Die prozessgestützte SAP Allsparten-</span></p>
                          <p><span class="upperC">Lösung für flexible, effiziente </span></p>
                          <p><span class="upperC">Bestandsführung.</span></p>
                      </div>
                      <div class="col-sm-4" style="align-self: center;">
                          <img data-src="/src/assets/img/kreuz.png" style="max-width:100%;" alt="" />
                      </div>
                  </div>
                  <div class="row">
                      <div class="offset-xs-1 col-sm-3 pt-5">
                          <a class="init" href="msgpia.html">Zur msg.PIA Webseite
                              <div class="orangeRect"></div>
                          </a>
                      </div>
                  </div>
              </div>
          </div>
          <!-- zweite Seite Ende -->
        </full-page>
      </div>
    </div>
    
    </template>
    
    <script>
    import Footer from '../Modules/Footer/Footer.vue';
    import LogoSmall from '../Modules/Logos/LogoSmall.vue';
    import LogoWhite from '../Modules/Logos/LogoWhite.vue';
    import VideoView from '../Modules/Media/VideoView.vue';
    
    
    export default {
      data: function () {
        return {
            options: {
                navigation: true,
                anchors: ['home', 'msgpia', 'mals', 'malsVideo', 'kunden', 'kontakt'],
                navigationPosition: 'right',
                navigationTooltips: ['Home', 'msg.Pia', 'MALS', 'MALS Media', 'Unsere Kunden', 'Kontakt'],
                css3: true,
                verticalCentered: false,
                paddingTop: '50px',
                paddingBottom: '50px',
                sectionSelector: '.section'
            }
        }
      },
      components: {
          'logo-small' : LogoSmall,
          'logo-white' : LogoWhite,
          'video-view' : VideoView,
          Footer
      },
      methods:{
    
      }
    }
    </script>
    
    Reviewed by SueIte at 2018-07-25 08:16
  • 10. Gridsome - ReferenceError: window is not defined

    Description

    Hi,

    I'm using Gridsome but keep getting this issue.

    Error:

    ReferenceError: window is not defined
        at Object.<anonymous> (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:94:166)
        at __webpack_require__ (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:33:0)
        at Object.<anonymous> (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:132:0)
        at __webpack_require__ (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:33:0)
        at Object.<anonymous> (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:102:0)
        at __webpack_require__ (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:33:0)
        at Object.<anonymous> (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:268:0)
        at __webpack_require__ (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:33:0)
        at assets/js/app.5629819a.js:2833:18
        at Object.<anonymous> (node_modules/vue-fullpage.js/dist/vue-fullpage.common.js:82:0)
    

    src/main.js

    import DefaultLayout from '~/layouts/Default.vue';
    
    import VueFullPage from 'vue-fullpage.js';
    
    export default function (Vue, { router, head, isClient }) {
      // Set default layout as a global component
      Vue.component('Layout', DefaultLayout);
    
      Vue.use(VueFullPage);
    }
    

    I'm getting 'Cannot resolve file 'vue-fullpage.js''.

    It works perfect on local it's only when I try to run it on Netlify?! But I still do get the ReferenceError: window is not defined locally, it just seems to work.

    Please help,

    Thanks, Jake.

    Reviewed by JakeHenshall at 2019-12-03 01:22
  • 11. Vue-fullpage is not working with SSR Nuxt

    Description

    When building Nuxt in production with default setup, vue-fullpage breaks on any dom change.

    Link to isolated reproduction with no external CSS / JS

    https://github.com/alexguevara/fp-nuxt-issue

    Steps to reproduce it

    1. npm run build
    2. npm run start
    3. Click on the button on the hero section

    It seems that on every dom change fullpage removes its classes from section elements. This happens only on production build. See video for details: https://www.loom.com/share/45ee7ef8a6c84550a65cb85246e81cd7

    Versions

    vue-fullpage.js: ^0.1.4 nuxt: 2.9.2

    UPDATE: the problem is caused by SSR.

    Using <no-ssr> fixes the issue, but we then loose SEO so this is not a solution.

    And we have this when using SSR wich is not correct I think image

    Reviewed by alexguevara at 2019-09-25 16:37
  • 12. Bump terser from 5.12.0 to 5.14.2 in /example

    Bumps terser from 5.12.0 to 5.14.2.

    Changelog

    Sourced from terser's changelog.

    v5.14.2

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    • Source maps improvements (#1211)
    • Performance improvements in long property access evaluation (#1213)

    v5.14.1

    • keep_numbers option added to TypeScript defs (#1208)
    • Fixed parsing of nested template strings (#1204)

    v5.14.0

    • Switched to @​jridgewell/source-map for sourcemap generation (#1190, #1181)
    • Fixed source maps with non-terminated segments (#1106)
    • Enabled typescript types to be imported from the package (#1194)
    • Extra DOM props have been added (#1191)
    • Delete the AST while generating code, as a means to save RAM

    v5.13.1

    • Removed self-assignments (varname=varname) (closes #1081)
    • Separated inlining code (for inlining things into references, or removing IIFEs)
    • Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)

    v5.13.0

    • All calls to eval() were removed (#1171, #1184)
    • source-map was updated to 0.8.0-beta.0 (#1164)
    • NavigatorUAData was added to domprops to avoid property mangling (#1166)

    v5.12.1

    • Fixed an issue with function definitions inside blocks (#1155)
    • Fixed parens of new in some situations (closes #1159)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-07-21 04:08
nuxt-fullpage is a nuxt module for creating fullscreen page scroll fast and simple.

nuxt-fullpage is a nuxt module for creating fullscreen page scroll fast and simple.

Jun 14, 2022
A small wrapper for integrating SweetAlert to Vuejs
A small wrapper for integrating SweetAlert to Vuejs

VueSwal You can customize VueSwal to fit your needs. Api sweetalert or Examples Installation npm npm install vue-swal yarn yarn add vue-swal Usage Bun

Jul 25, 2022
A convenient wrapper for sweetalert2.
A convenient wrapper for sweetalert2.

vue-sweetalert2 Vue.js wrapper for SweetAlert2. With support SSR. Attention: When using "Vue3: Composition API" it is better not to use this wrapper.

Aug 16, 2022
Jenesius vue modal is simple library for Vue 3 only

Jenesius vue modal is simple library for Vue 3 only

Aug 1, 2022
Vue-modally - a component based vue modal library

vue-modally is a component based vue modal library, in a simpler term, it lets you use any vue component as asynchronous/synchronous modal programmatically

Jul 3, 2022
Easy to use, highly customizable Vue.js modal library.
Easy to use, highly customizable Vue.js modal library.

Vue.js modal Easy to use, highly customizable Vue.js modal library. ?? Examples ?? Documentation ?? Changelog ?? Looking for maintainers ?? Sponsorshi

Aug 11, 2022
The sweetest library to happen to modals.

SweetModal The sweetest library to happen to modals. Now available for Vue.js. Usage Install SweetModal for Vue.js through npm: npm install sweet-moda

Aug 3, 2022
A tiny & modern library that allows you to work with dialogs as with asynchronous functions.

Vue Promise Dialogs A tiny & modern library that allows you to work with dialogs as with asynchronous functions. See demo Why? Because many dialogs wo

Jul 25, 2022
vue-ya-semantic-modal - Yet another semantic-ui modal component for Vue2 without Jquery but with Vue transition
vue-ya-semantic-modal - Yet another semantic-ui modal component for Vue2 without Jquery but with Vue transition

vue-ya-semantic-modal Yet another semantic-ui modal component for Vue2 without Jquery but with pure Vue transition This component only provide a frame

Jan 20, 2022
🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.

Vue Final Modal Looking for a Vue 3 version? It's over here ?? Documentation ?? Examples Introduction Vue Final Modal is a renderless component! You c

Aug 12, 2022
🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.

??Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.

Aug 4, 2022
Vue-basic-alert - Basic Vue Alert Component for basic use cases

vue-basic-alert Basic Vue Alert Component for basic use cases. Demo Installation

Aug 13, 2022
Pixabay-gallery-in-vue-and-buefy - A gallery application in Vue and Buefy which uses pixabay API
Pixabay-gallery-in-vue-and-buefy - A gallery application in Vue and Buefy which uses pixabay API

PixaBay Gallery in Vue and Buefy Project Briefing This is a carousel based galle

Jul 6, 2022
Vue modals with a single component

Vuedals VueJS (2.x) Plugin for multiple modals windows with a single component instance. DEMO View demo on jsFiddle What is this? A plugin to open sto

Aug 13, 2022
Modal window for vue.js
Modal window for vue.js

Vudal Modal window component based on Semantic UI design. (Does not require semantic ui, it is completely independent) Install plugin import { VudalPl

Jun 28, 2021
A Vue modal with animations.

Vodal A vue modal with animations. Example Installation npm i -S vodal Usage <vodal :show="show" animation="rotate" @hide="show = false"> <div>A

Aug 5, 2022
A Vue component to display an image gallery lightbox

vue-image-lightbox A simple image/video lightbox component for Vuejs NPM Package I use CSS style from react-images Demo! Development (NPM / Yarn) npm

Aug 13, 2022
⚠️ Vue 2 Simple Alert Component (SweetAlert Inspired)
⚠️ Vue 2 Simple Alert Component (SweetAlert Inspired)

⚠️ vue2-simplert Vue 2 Simple Alert Component (SweetAlert Inspired) Vue2-Simplert Now Coming as Vue.js Plugin Check : https://github.com/mazipan/vue2-

Jul 17, 2022
Vue modal component for Semantic-Ui no jquery
Vue modal component for Semantic-Ui no jquery

Vue-Semantic-Modal Modal component for semantic-ui without jQuery Example Usage <modal v-model="showModal"> <p slot="header">Confirmation needed<

Jan 31, 2022