Vue3 Pixi

Appearance

Translation:

Application ​

Creates a Application.

Creates a Pixi application where all Pixi elements and composite functions need to be inside the application to work properly.

<script setup>
import { Application } from 'vue3-pixi'
</script>

<template>
  <Application :width="240" :height="240">
    <text :anchor="0.5" :x="120" :y="120" :style="{ fill: 'white' }">
      Hello World
    </text>
  </Application>
</template>
<script setup>
import { Application } from 'vue3-pixi'
</script>

<template>
  <Application :width="240" :height="240">
    <text :anchor="0.5" :x="120" :y="120" :style="{ fill: 'white' }">
      Hello World
    </text>
  </Application>
</template>

Getting Instance Externally ​

You can obtain the Application instance by binding a ref externally, but it is generally recommended to use useApplication internally.

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import type { ApplicationInst } from 'vue3-pixi'
import { Application } from 'vue3-pixi'
const appRef = ref<ApplicationInst>()

onMounted(() => {
  appRef.value?.app.start()
})
</script>

<template>
  <Application ref="appRef" :width="240" :height="240" :auto-start="false">
    <text :x="120" :y="200" :style="{ fill: 'white' }" :anchor="0.5">
      Click and drag
    </text>
    <draggable-circle />
  </Application>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import type { ApplicationInst } from 'vue3-pixi'
import { Application } from 'vue3-pixi'
const appRef = ref<ApplicationInst>()

onMounted(() => {
  appRef.value?.app.start()
})
</script>

<template>
  <Application ref="appRef" :width="240" :height="240" :auto-start="false">
    <text :x="120" :y="200" :style="{ fill: 'white' }" :anchor="0.5">
      Click and drag
    </text>
    <draggable-circle />
  </Application>
</template>

API ​

Application Props ​

NameTypeDefaultDescription
widthnumber800The width of the renderer
heightnumber600The height of the renderer
background

string|number|array|object

The background color of the renderer
backgroundColor

string|number|array|object

0x000000The background color of the renderer
backgroundAlphanumber1The background alpha of the renderer
resolutionnumber1The resolution / device pixel ratio of the renderer

more props in PIXI.Application

Application Slots ​

NameDescription
defaultThe default slot is where you put all your Pixi elements.