[Vuejs]-Trying to install an external javascript library (choreographer-js) in a nuxt project, but it doesn't work

by

0👍

✅

First, you’re exporting an object (export default { ... }) with properties rather than a function body. So statements like let choreographer = ... won’t work there syntactically. That’s what’s causing your error.

Instead, run that code within a Vue lifecycle hook. For example:


<script>
export default {
  // this is shorthand for mounted: function mounted () {
  mounted () {
    let choreographer = new Choreographer({
      animations: [
        {
          range: [-1, 1000],
          selector: '#box',
          type: 'scale',
          style: 'opacity',
          from: 0,
          to: 1
        }
      ]
    })

    window.addEventListener('scroll', () => {
      choreographer.runAnimationsAt(window.pageYOffset)
    })
  }
}
</script>

The second issue, which you’re no doubt aware of because you created a plugin that will only run client-side (~/plugins/choreographer.client.js) is that you need to take care only to run code that is meant for the browser within the browser (which would mean you can’t assume that the choreographer instance is defined on the server-side).

Leave a comment