Pixi not rendering stage inside Vue component

[kobz]

I want to render a simple JPG (just to begin with) using PIXI v5 inside of my Vue v2 page. The sprite is not rendered (most likely PIXI.Container is not rendered too). Still, I can see in Network that the image is loaded just fine. 

I append pixi.js app instance on $ref in created() hook. I use PIXI.Loader to load the image - still it does not appear on the screen: just some background color provided on PIXI.Application initialisation.

This is how I init pixi app instance:

created() {
  this.$nextTick(() => {
    const { pixi } = this.$refs;
    PixiSceneRenderer(pixi);
  });
},

This is the exported function:

export default function PixiSceneRenderer(element) {
  const app = new PIXI.Application({
    // setting like width, height etc
  });

  const { renderer, stage, loader } = app;

  // Appending view to DOM elem
  element.appendChild(app.view);

  const container = new PIXI.Container();
  container.x = app.screen.width / 2;
  container.y = app.screen.height / 2;

  container.pivot.x = container.width / 2;
  container.pivot.y = container.height / 2;
  stage.addChild(container);

  loader.add('image', require('path to my image'));
  loader.load();
  loader.onComplete.add(onAssetsLoaded);

  resize();
  window.onresize = function(event) {
    resize();
  }

  function resize() {
    let w;
    let h;
    if (window.innerWidth / window.innerHeight >= ratio) {
      w = window.innerHeight * ratio;
      h = window.innerHeight;
    } else {
      w = window.innerWidth;
      h = window.innerWidth / ratio;
    }
    renderer.view.style.width = w + 'px';
    renderer.view.style.height = h + 'px';
  }

  function onAssetsLoaded () { 
    createElements();
    update();
  }

  function createElements () {
    const texture = loader.resources['image'].texture;
    const sprite = new PIXI.Sprite.from(texture);

    // setting up sprite x and y coords, height, width etc

    container.addChild(sprite);
  }

  function update () {
    renderer.render(stage);
    requestAnimationFrame(update);
  }
}

What am I doing wrong? I followed tuts on this forum and on pixi's docs and still couldn't get a solution

[ivan.popelyshev]

ok, what do i see here:

1. app has no `autoStart:false` but at the same time you use custom RAF. please read https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop to avoid that kind of problems in future

2. when you assign container pivot its width and height are zero  I don't even know why do you need center pivot without center screen position here. Just delete those lines.

3. you use default canvas width/height which is 800/600 i think. Your image will be pixelated or blurred depending on CSS. Use "renderer.resize()" instead of just css stuff if it evolves into a problem.

4. new PIXI.Sprite.from  - from is not a constructor, its a static function . in your case you need "new PIXI.Sprite(texture)".

Even with all those problems you should see an image, but you dont! That means that my telepathy didnt pick up your issue. Please make a demo so I or someone else can debug it.

[kobz]

@ivan.popelyshev

I followed your suggestions and pixi started to work. Thanks!

[ivan.popelyshev]

OK, I didnt expect that. Maybe 4-th was the cause