How to load a Pixi instance in Vuejs?

user_11890525 0
Viewed 5419

I am learning PixiJS inside a VueJS component following the Pixi tutorial and I the console shows this error :

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Converting circular structure to JSON

<template>
  <div>
    {{ displayPixi() }}
  </div>
</template>

<script>
  import * as PIXI from 'pixi.js'

  export default {
    name: 'HelloWorld',

    methods: {
      displayPixi() {
        return new PIXI.Application({width: 256, height: 256})
      }
    }
  }
</script>

How do you load Pixi instances in VueJS ?

pixi.js vue.js
2 Answers

I noticed as I posted my question inside as an answer it got voted down but I wanted to post my working code as it may help others and is the same concept of getting Pixijs inside a vue component. This is using vue ui to create the application as well

<template>
  <div class="connections">
    <canvas id="pixi"></canvas>
  </div>
</template>

<script>
import * as PIXI from 'pixi.js'

export default {
  name: 'ConnectionsLayer',
 
  methods: {
    drawPixi() {
      var canvas = document.getElementById('pixi')

      const app = new PIXI.Application({
        width: window.innerWidth,
        height: window.innerHeight,
        antialias: true,
        transparent: true,
        view: canvas,
      })

      let graphics = new PIXI.Graphics() 
      graphics.lineStyle(8, 0x000000)

      //start
      graphics.moveTo(300, 250)
      //end
      graphics.lineTo(500, 250)

      app.stage.addChild(graphics)
    },
  },

  mounted() {
    this.drawPixi()
  },
}
``
user_1317780

Well, what you really need to do is following the tutorial you have provided.

As you can see, after the application is been created, you need to attach its view to something.

As an example reported in that tutorial document.body.appendChild(app.view);

In a "Vue" way an example could be that in the data you can define

data(){
 return {
   app: new Application(...)
 }

and in your mounted hook you can

 mounted(){
   this.$el.appendChild(this.app.view)
 }

This is just an example, doing what i said in the mounted hook it's not the best solution cause it will fire if there is a conditional rendering, but it will serve the cause.

user_46895580
Related