Answer a question

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 ?

Answers

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.