Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
aderon14

Draggable in Nuxt

Recommended Posts

Hi, is there a way to use the gsap Draggable in Nuxt.js?

 

I get the error "navigator is not defined" in file "node_modules\gsap\Draggable.js" line 391

_isIE10orBelow = (((/MSIE ([0-9]{1,}[\.0-9]{0,})/).exec(navigator.userAgent) || (/Trident\/.*rv:([0-9]{1,}[\.0-9]{0,})/).exec(navigator.userAgent)) && parseFloat( RegExp.$1 ) < 11), //Ideally we'd avoid user agent sniffing, but there doesn't seem to be a way to feature-detect and sense a border-related bug that only affects IE10 and IE9.

 

I am referencing gsap and Draggable inside my .vue file by:

import TweenMax from 'gsap'
import Draggable from 'gsap/Draggable'

 

I am guessing this is due to Nuxt doing a server side render and not having a window/navigator object?

Link to comment
Share on other sites

@OSUblake Thanks for that, I finally figured it out. I added it within the mounted function

 

<script>
import TweenMax from 'gsap'

export default {
  data () {
    return {

    }
  },
  mounted () {
    if (process.browser) {
      const Draggable = require('gsap/Draggable')
      
      Draggable.create('.scrubber__blob', {
        type: 'x',
        bounds: '.scrubber',
        onDrag () {
          let perc = this.endX / this.maxX * 100
          perc = Math.floor(perc) + '%'
          console.log(perc)
        }
      })
    }
  }
}
</script>

 

I wonder if this is the proper way to import components and/or other libraries as they all seem to be at the top just after the opening the <script> tags

Link to comment
Share on other sites

Hi @aderon14

 

I think that's fine, but I'm no expert. For that, I would highly recommend following Sarah Drasner. She does a bunch of workshops and presentations on GSAP and Vue/Nuxt.

 

GitHub - a bunch of good stuff in here

https://github.com/sdras?tab=repositories

 

CodePen

See the Pen public by sdras (@sdras) on CodePen

 

Twitter

https://twitter.com/sarah_edo

 

Slides

http://slides.com/sdrasner


 

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×