Renderer

vue3-pixi uses a custom Vue renderer to map tags to PixiJS instances.

The following PixiJS objects are supported out of the box:

Namespaces

To avoid conflicts with other tags, such as <filter>, you can use the pixi- prefix or capitalize the first letter with <Filter>.

html

<Filter />
<!-- or -->
<pixi-filter />

All elements (including custom elements) can use the pixi- prefix or capitalize the first letter to avoid conflicts with other tags.

Using a Custom Element

You can add custom PixiJS instances to the renderer if you have a custom class (your own or from a third-party library).

// main.js
import { Text } from 'pixi.js'
import { patchProp as defPatchProp, renderer } from 'vue3-pixi'

class YellowText extends Text {
  constructor(options) {
    super(options)
    this.style.fill = 'yellow'
  }
}

renderer.use({
  name: 'YellowText',
  createElement: props => new YellowText({ text: props.text, style: props.style }),
  patchProp(el, key, prevValue, nextValue) {
    // handle special prop here..

    // or fallback to default
    return defPatchProp(el, key, prevValue, nextValue)
  },
})

If you override any of these hooks, the default behavior for that hook is replaced entirely.

To suppress Vue warnings for the custom element tag, update the plugin configuration:

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import { isCustomElement, transformAssetUrls } from 'vue3-pixi'

export default defineConfig({
  plugins: [
    vue({
      template: {
        // support for custom elements and remove the unknown element warnings
        compilerOptions: {
          isCustomElement: (tag) => {
            return tag === 'yellow-text' || isCustomElement(tag)
          }
        },
      },
    }),
  ],
})

TypeScript

If you are using TypeScript, you can add types to custom elements by declaring GlobalComponents from the @vue/runtime-core module.

import type { TextProps } from 'vue3-pixi'

interface YellowTextProps extends TextProps {
  text: string
  style: TextStyle
  // ...
}

interface YellowTextComponent {
  (props: YellowTextProps): any
}

declare module '@vue/runtime-core' {
  interface GlobalComponents {
    YellowText: YellowTextComponent
    PixiYellowText: YellowTextComponent
  }
}

Renderer ​

Namespaces ​

Using a Custom Element ​

TypeScript ​

Renderer

Namespaces

Using a Custom Element

TypeScript