Vue.js Custom Component Renderers

Published on March 9, 2017

Joshua Bemenderfer

Vue.js Custom Component Renderers

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

While in most web apps you’ll likely be rendering to the DOM, there are a few special cases where you might want to use Vue for something else. Say you’re developing an app with WebGL and you’d like to describe it with Vue as a tree of components. While Vue doesn’t explicitly support this at the moment, it’s entirely possible to implement yourself, as you’ll discover below.

We’ll be using pixi.js for this guide, so be sure to install that via npm. This is an advanced article, and as such, it is assumed that you already have a skeleton app prepared with webpack and vue 2.2+. Additionally, explanation will largely happen through code comments due to the complex nature of the components.

The goal will be to produce a set of three Vue components, the renderer, container, and a sprite component in order to draw textures in a 2D WebGL canvas with pixi.js.

The end result should look something like this:

Vue.js logo rendered in PIXI.js

Note: This is not a guide on implementing a complete PIXI renderer in Vue, just the basics. You’ll have to handle anything further yourself if you intend to do something more serious.

The Renderer Component

This is the component that initializes our PIXI stage and provides the PIXI objects to all of its descendants. (via. Vue 2.2+'s provide / inject system.)

  <div class="pixi-renderer">
    <canvas ref="renderCanvas"></canvas>
    <!-- All child <template> elements get added in here -->
import Vue from 'vue';
import * as PIXI from 'pixi.js';

export default {
  data() {
    return {
      // These need to be contained in an object because providers are not reactive.
      PIXIWrapper: {
        // Expose PIXI and the created app to all descendants.
        PIXIApp: null,
      // Expose the event bus to all descendants so they can listen for the app-ready event.
      EventBus: new Vue()
  // Allows descendants to inject everything.
  provide() {
    return {
      PIXIWrapper: this.PIXIWrapper,
      EventBus: this.EventBus

  mounted() {
    // Determine the width and height of the renderer wrapper element.
    const renderCanvas = this.$refs.renderCanvas;
    const w = renderCanvas.offsetWidth;
    const h = renderCanvas.offsetHeight;

    // Create a new PIXI app.
    this.PIXIWrapper.PIXIApp = new PIXI.Application(w, h, {
      view: renderCanvas,
      backgroundColor: 0x1099bb


<style scoped>
canvas {
  width: 100%;
  height: 100%;

This component primarily does two things.

  1. When the renderer is added to the DOM, create a new PIXI app on the canvas and emit the ready event.
  2. Provides the PIXI app and event bus to all descendant components.

Container Component

The container component can contain an arbitrary amount of sprites or other containers, allowing for group nesting.

export default {
  // Inject the EventBus and PIXIWrapper objects from the ancestor renderer component.
  inject: ['EventBus', 'PIXIWrapper'],
  // Take properties for the x and y position. (Basic, no validation)
  props: ['x', 'y'],

  data() {
    return {
      // Keep a reference to the container so children can be added to it.
      container: null

  // At the current time, Vue does not allow empty components to be created without a DOM element if they have children.
  // To work around this, we create a tiny render function that renders to <template><!-- children --></template>.
  render: function(h) {
    return h('template', this.$slots.default)

  created() {
    // Create a new PIXI container and set some default values on it.
    this.container = new this.PIXIWrapper.PIXI.Container();

    // You should probably use computed properties to set the position instead.
    this.container.x = this.x || 0;
    this.container.y = this.y || 0;

    // Allow the container to be interacted with.
    this.container.interactive = true;

    // Forward PIXI's pointerdown event through Vue.
    this.container.on('pointerdown', () => this.$emit('pointerdown', this.container));

    // Once the PIXI app in the renderer component is ready, add this container to its parent.
    this.EventBus.$on('ready', () => {
      if (this.$parent.container) {
        // If the parent is another container, add to it.
      } else {
        // Otherwise it's a direct descendant of the renderer stage.

      // Emit a Vue event on every tick with the container and tick delta for an easy way to do frame-by-frame animation.
      // (Not performant)
      this.PIXIWrapper.PIXIApp.ticker.add(delta => this.$emit('tick', this.container, delta))

The container component takes two propertis, x and y, for position and emits two events, pointerdown and tick to handle clicking and frame updates, respectively. It can also have any number of containers or sprites as children.

The Sprite Component

The sprite component is almost the same as the container component, but with some extra tweaks for PIXI’s Sprite API.

export default {
  inject: ['EventBus', 'PIXIWrapper'],
  // x, y define the sprite's position in the parent.
  // imagePath is the path to the image on the server to render as the sprite.
  props: ['x', 'y', 'imagePath'],

  data() {
    return {
      sprite: null

  render(h) { return h() },

  created() {
    this.sprite = this.PIXIWrapper.PIXI.Sprite.fromImage(this.imagePath);
    // Set the initial position.
    this.sprite.x = this.x || 0;
    this.sprite.y = this.y || 0;

    // Opt-in to interactivity.
    this.sprite.interactive = true;

    // Forward the pointerdown event.
    this.sprite.on('pointerdown', () => this.$emit('pointerdown', this.sprite));
    // When the PIXI renderer starts.
    this.EventBus.$on('ready', () => {
      // Add the sprite to the parent container or the root app stage.
      if (this.$parent.container) {
      } else {

      // Emit an event for this sprite on every tick.
      // Great way to kill performance.
      this.PIXIWrapper.PIXIApp.ticker.add(delta => this.$emit('tick', this.sprite, delta));

The sprite is pretty much the same as a container, except that it has an imagePath prop which allows you to choose what image to load and display from the server.


A simple Vue app that uses these three components to render the image at the start of the article:

  <div id="app">
        :x="200" :y="400"
        @tick="tickInfo" @pointerdown="scaleObject"
        <sprite :x="0" :y="0" imagePath="./assets/vue-logo.png"/>

import PixiRenderer from './PIXIRenderer.vue'
import Sprite from './PIXISprite.vue'
import Container from './PIXIContainer.vue'

export default {
  components: {

  methods: {
    scaleObject(container) {
      container.scale.x *= 1.25;
      container.scale.y *= 1.25;

    tickInfo(container, delta) {
      console.log(`Tick delta: ${delta}`)

#app {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;


  • Unfortunately, there’s still a DOM representation present for any container components due to Vue requiring you to have an element to render if you want to add children to your component. Hopefully this will be resolved by a patch in the near future.
  • You have to proxy any input properties and output events from the app. This is no different from any other library, but can be quite an extensive and difficult to test task if you’re maintaining a binding for a large library.
  • While screen graphs and renderers are a particularly ideal use-cases for this technique, it can be applied to just about anything, even AJAX requests. That said, it’s almost always a terrible idea to mix presentation and logic.

👉 Hopefully your knowledge of what can be done with Vue components has now been significantly expanded and the ideas are flowing like a waterfall. These are practically unexplored grounds, so there’s plenty you could choose to do!

Tread carefully! (or don’t!)

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us

About the authors
Default avatar
Joshua Bemenderfer


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Almost 4 years old article but very interesting. I would like to deepen your work and continue what you have started. Can you tell me why the tickers are slow? Do you have any idea how to improve the performance to be as close as that of PIXI? Cheers!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel