Events

All events emitted by pixi objects are supported. Some of vue's event modifiers will work, like @click.left.

adding an event listener to an element will currently automatically set the element's eventMode to static.

<!-- eslint-disable no-console -->
<script lang="ts" setup>
import { ref } from 'vue'

const eventName = ref('none')

function eventHandler(name: string, evt: any) {
  eventName.value = name
  console.log(name, evt)
}
</script>

<template>
  <sprite
    :x="120"
    :y="120"
    :anchor="0.5"
    texture="/assets/mushroom.png"
    @click="evt => eventHandler('click', evt)"
    @pointerenter="evt => eventHandler('pointerenter', evt)"
    @pointermove="evt => eventHandler('pointermove', evt)"
    @pointerleave="evt => eventHandler('pointerleave', evt)"
  />
  <text :x="120" :y="180" :style="{ fill: 'white' }" :anchor="0.5">
    {{ eventName }}
  </text>
</template>

Render Events

all elements support render event, which allows for flexible manipulation of elements, For example, using on <grahpics /> and <particle-container />

This will set up a watchEffect internally that will automatically call the event handler again if any dependencies on the render method have changed.

<script lang="ts" setup>
import type { GraphicsInst } from 'vue3-pixi'

function drawArc(e: GraphicsInst) {
  e.beginFill('#4f455c')
  e.arc(0, 0, 100, 0, Math.PI, false)
}
</script>

<template>
  <graphics :x="120" :y="120" @render="drawArc" />
</template>