Is this the right way to import gsap in vue.js (it works but is it the "right" way?)

Question

I'm quite new to Vue.js and have had some problems getting libraries to work without getting the "error 'X' is not defined no-undef" message.

In this case it is 'Back' that is not defined (which is a part of GSAP) I figured the only place to "define" Back would be in the import.

Is this just the way to import libraries? Do I have to write every undefined part in the import like this? It works but it just seems unnecessary.

<template>
  <div id="mainTemplate">
    <h2>This is the MainTemplaye.vue Component</h2>

    <div ref="box" class="box"></div>
  </div>
</template>

<script>
import { TimelineLite, Back } from "gsap";

export default {
  name: "MainTemplate",
  mounted() {
    const { box } = this.$refs;
    const timeline = new TimelineLite();

    timeline.to(box, 1, { x: 200, rotation: 90, ease: Back.easeInOut, })
    timeline.to(box, 0.5, { background: 'green' },'-=0.5')
  },
};
</script>

<style>
.box {
  height: 60px;
  width: 60px;
  background: red;
}
</style>

Answer 1

I'm not sure where you're learning from, but you're using the old syntax of GSAP. If you use the new syntax of GSAP you don't have to import anything other than gsap in your case:

import { gsap } from "gsap";

export default {
  name: "MainTemplate",
  mounted() {
    const { box } = this.$refs;
    const timeline = gsap.timeline();

    timeline.to(box, { duration: 1, x: 200, rotation: 90, ease: 'back.inOut' })
    timeline.to(box, { background: 'green' }, '-=0.5')
  },
};

The best place to start learning is the official GSAP Getting Started article.