VueJs and Pixi - not rendering

[Adam Procter]

I am new to pixi and am just starting to integrate this in my vue project as a new layer but I am not calling it in the right place as the pixi stuff does not render.

Does anyone know where I should call the PIXI stuff within the vue structure please.

Here is my code so far

 

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

<script>
import { mapState } from 'vuex'
import * as PIXI from 'pixi.js'
export default {
  name: 'ConnectionsLayer',
  computed: mapState({
    toolmode: (state) => state.ui.mode,
  }),
  methods: {},
}

// I assume this should be called above maybe on mounted 

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.x = app.renderer.width / 2
graphics.y = app.renderer.width / 2
app.stage.addChild(graphics)

graphics.lineStyle(0)
graphics.beginFill(0xde3249, 1)
graphics.drawCircle(100, 250, 50)
graphics.endFill()

graphics.lineStyle(0)
graphics.beginFill(0xde3249, 1)
graphics.drawCircle(300, 250, 50)
graphics.endFill()

graphics.lineStyle(2, 0xffffff, 1)
graphics.moveTo(100, 250)
graphics.lineTo(300, 250)

</script>

any pointers would be much appreciated thanks

[khansami]

Here is working version of your code in Vue Single File component. The code pen link is https://codepen.io/samiullah1989/pen/qBagomw. I did change the y axis of graphics to fit in a view.