pixijs Vue Component working :)

pixijs.vue

<template>
  <div id="gl">
    <div class="columns" style="position:absolute;top:10px;left:10px;z-index:1001;">
      <div class="column">
        <div class="button" @click="buttonClicked">Hello-{{count.button}}</div>
      </div>
      <div class="column">{{sysInfo.width}}x{{sysInfo.height}}</div>
      <div class="column">{{sysInfo.lastKeyDown}}</div>
      <div class="column">{{jfSpriteDir}}</div>
      <div class="column">{{drag}}</div>
    </div>
  </div>
</template>

<script>
//let PIXI;
let glApp;

function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
/**
 * @example contain(explorer, {x: 28, y: 10, width: 488, height: 480});
 * @param  sprite PIXI.Sprite
 * @param container Object {x,y,width,height}
 * @returns String
 */
function contain(sprite, container) {
  let collision = undefined;

  //Left
  if (sprite.x < container.x) {
    sprite.x = container.x;
    collision = "left";
  }

  //Top
  if (sprite.y < container.y) {
    sprite.y = container.y;
    collision = "top";
  }

  //Right
  if (sprite.x + sprite.width > container.width) {
    sprite.x = container.width - sprite.width;
    collision = "right";
  }

  //Bottom
  if (sprite.y + sprite.height > container.height) {
    sprite.y = container.height - sprite.height;
    collision = "bottom";
  }

  //Return the `collision` value
  return collision;
}

export default {
  mounted() {
    if (process.client) {
      import("pixi.js")
        .then(this.bootStrap)
        .catch(console.error);
    }
    window.addEventListener("resize", this.resizeHandler, {
      stopPropagation: true
    });
    document.onkeydown = this.handleKeyDown;
  },
  data: function() {
    return {
      count: { button: 0 },
      sysInfo: { width: 0, height: 0, lastKeyDown: "" },
      jfSprite: {},
      jfSpriteDir: 0,
      drag: { event: "" }
    };
  },
  computed: {},
  methods: {
    resizeHandler(e) {
      this.sysInfo.width = window.innerWidth;
      this.sysInfo.height = window.innerHeight - 55;
      glApp.renderer.resize(this.sysInfo.width, this.sysInfo.height);
    },
    loadProgressHandler(loader, resource) {
      console.log(`Loading: ${resource.url} Progress: ${loader.progress}%`);
    },
    bootStrap(PIXIJS) {
      window.PIXI = PIXIJS;
      glApp = new PIXI.Application({
        antialias: true, // default: false
        transparent: false, // default: false
        resolution: 1 // default: 1
        //resizeTo: document.getElementById("gl")
      });
      glApp.renderer.backgroundColor = 0xffffff;
      glApp.renderer.view.style.position = "absolute";
      glApp.renderer.view.style.display = "block";
      glApp.renderer.view.style.zIndex = "1000";
      glApp.renderer.autoResize = true;
      document.getElementById("gl").appendChild(glApp.view);
      this.resizeHandler();
      //glApp.loader
      PIXI.Loader.shared
        .on("progress", this.loadProgressHandler)
        .add("jficon", "/jficon.png")
        .add("bird1","/bird1.json")
        .load(this.setupGame);
    },
    setupGame(loader, resources) {
      const jfTexture = PIXI.utils.TextureCache["/jficon.png"];
      // This creates a texture from a 'jfSprite.png' image
      this.jfSprite = new PIXI.Sprite(jfTexture);

      let txs=[]
      let sheet = PIXI.Loader.shared.resources["bird1"].spritesheet
      let bird1=new PIXI.AnimatedSprite(sheet.animations["fly"])
      bird1.anchor.set(0.5)
      bird1.position.set(400,100)
      bird1.animationSpeed=0.1
      bird1.play()

let bird2=new PIXI.AnimatedSprite(sheet.animations["stand"])
      bird2.anchor.set(0.5)
      bird2.position.set(400,120)
      bird2.animationSpeed=0.01
      bird2.play()

      glApp.stage.addChild(bird1,bird2)
      

      // Setup the position of the jfSprite
      this.jfSprite.x = glApp.renderer.width / 2;
      this.jfSprite.y = glApp.renderer.height / 2;

      // Rotate around the center
      this.jfSprite.anchor.x = 0.5;
      this.jfSprite.anchor.y = 0.5;

      this.jfSprite.interactive = true;
      this.jfSprite.buttonMode = true;
      this.jfSprite.on("pointertap", e => {
        this.drag = { event: e.type };
      });
      /*       .on('pointerup', onButtonUp)
        .on('pointerupoutside', onButtonUp)
        .on('pointerover', onButtonOver)
        .on('pointerout', onButtonOut);*/
      this.jfSprite.on("pointerup", function(e) {
        this.drag = { event: "pointerup" };
      });
      this.jfSprite.on("pointerover", function(e) {
        this.drag = { event: e.type };
        console.log("pointerover");
      });

      // Add the jfSprite to the scene we are building
      glApp.stage.addChild(this.jfSprite);

      // Listen for frame updates
      glApp.ticker.add(this.jfSpriteAction);

      let rectangle = new PIXI.Graphics();
      rectangle.lineStyle(4, 0xff3300, 1);
      rectangle.beginFill(0x66ccff);
      rectangle.drawRect(0, 0, 64, 64);
      rectangle.endFill();
      rectangle.x = 170;
      rectangle.y = 170;
      glApp.stage.addChild(rectangle);

      let circle = new PIXI.Graphics();
      circle.beginFill(0x9966ff);
      circle.drawCircle(0, 0, 32);
      circle.endFill();
      circle.x = 64;
      circle.y = 130;
      glApp.stage.addChild(circle);

      let roundBox = new PIXI.Graphics();
      roundBox.lineStyle(4, 0x99ccff, 1);
      roundBox.beginFill(0xff9933);
      roundBox.drawRoundedRect(0, 0, 84, 36, 10);
      roundBox.endFill();
      roundBox.x = 48;
      roundBox.y = 190;
      glApp.stage.addChild(roundBox);

      let line = new PIXI.Graphics();
      line.lineStyle(4, 0x00ff00, 1);
      line.moveTo(0, 0);
      line.lineTo(this.sysInfo.width / 4, this.sysInfo.height / 4);
      line.x = this.sysInfo.width / 2;
      line.y = this.sysInfo.height / 2;
      glApp.stage.addChild(line);

      let style = new PIXI.TextStyle({
        fontFamily: "Arial",
        fontSize: 36,
        fontStyle: "italic",
        fontWeight: "bold",
        fill: ["#ffffff", "#00ff99"], // gradient
        stroke: "#4a1850",
        strokeThickness: 5,
        dropShadow: true,
        dropShadowColor: "#000000",
        dropShadowBlur: 4,
        dropShadowAngle: Math.PI / 6,
        dropShadowDistance: 6,
        wordWrap: true,
        wordWrapWidth: 440
      });
      let message = new PIXI.Text("The End!", style);
      message.anchor.set(0.5);
      message.position.set(this.sysInfo.width / 2, this.sysInfo.height / 2);
      glApp.stage.addChild(message);

      var gameScene = glApp.stage;
      //Create the health bar
      let healthBar = new PIXI.Container();
      healthBar.position.set(glApp.stage.width - 170, 44);
      gameScene.addChild(healthBar);

      //Create the black background rectangle
      let innerBar = new PIXI.Graphics();
      innerBar.beginFill(0x000000);
      innerBar.drawRect(0, 0, 128, 8);
      innerBar.endFill();
      healthBar.addChild(innerBar);

      //Create the front red rectangle
      let outerBar = new PIXI.Graphics();
      outerBar.beginFill(0xff3300);
      outerBar.drawRect(0, 0, 128, 8);
      outerBar.endFill();
      healthBar.addChild(outerBar);
      healthBar.outer = outerBar;

      let points = [];
      for (let i = 0; i < 20; i++) {
        points.push(new PIXI.Point(i * 10, 0));
      }
      let ropeTex=PIXI.Texture.from("jficon.png")
      let rope = new PIXI.SimpleRope(ropeTex, points);
      rope.position.set(100,100)
      glApp.stage.addChild(rope);
    },
    jfSpriteAction() {
      // each frame we spin the jfSprite around a bit
      this.jfSprite.rotation += this.jfSpriteDir;
    },
    buttonClicked(e) {
      e.stopPropagation();
      this.count.button++;
    },
    handleKeyDown(e) {
      this.sysInfo.lastKeyDown = { key: e.key, code: e.code };
      switch (this.sysInfo.lastKeyDown.code) {
        case "ArrowLeft":
          this.jfSpriteDir = Math.max(this.jfSpriteDir - 0.1, -4);
          break;

        case "ArrowRight":
          this.jfSpriteDir = Math.min(
            this.jfSpriteDir +
              (0.01 + ((this.jfSpriteDir < 0 ? -1 : 1) * this.jfSpriteDir) / 2),
            4
          );
          break;

        case "ArrowUp":
          this.jfSprite.scale.set(2, 2);
          break;

        case "ArrowDown":
          this.jfSprite.scale.set(0.5, 0.5);
          break;

        default:
          console.log(e.key, e);
          break;
      }
    }
  }
};
</script>

<style scoped>
</style>