Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/hetari/creative-coding/llms.txt

Use this file to discover all available pages before exploring further.

usePixiApp manages the complete lifecycle of a PixiJS v8 Application instance inside a Vue component. It handles the dynamic import of PixiJS (keeping the library out of your initial bundle), creates and initialises the Application, appends its canvas to a container element you supply, and tears everything down safely on component unmount — using tryOnUnmounted from VueUse for SSR safety. You never need to call app.destroy() yourself.

​
Signature

export function usePixiApp(
  containerRef: TemplateRef<HTMLElement | null> | ShallowRef<HTMLElement | null>,
): {
  app: ShallowRef<Application | null>
  mountApp: (options?: Partial<ApplicationOptions>) => Promise<void>
}

​
Parameters

​
containerRef
TemplateRef<HTMLElement | null> | ShallowRef<HTMLElement | null>
required
A Vue TemplateRef or ShallowRef pointing to the container HTMLElement. When mountApp runs, the PixiJS canvas (instance.canvas) is appended as a child of this element. If the ref is null at call time, mountApp returns early without throwing.

​
Return Value

​
app
ShallowRef<Application | null>
A shallow reactive reference to the live PixiJS Application instance. The value is null before mountApp has been called and after the component unmounts. Use app.value.stage and app.value.renderer to build your scene.
​
mountApp
(options?: Partial<ApplicationOptions>) => Promise<void>
Dynamically imports PixiJS, constructs a new Application, calls instance.init(options), and appends instance.canvas to containerRef. If a previous Application instance already exists (e.g. after HMR), it is destroyed first before the new one is created.

​
Responsibilities

The composable owns the following concerns so you do not have to repeat them across sketches:
Owned by usePixiAppOwned by the caller (your sketch)
Dynamic import of pixi.jsLoading image and texture assets
Application creation and init()Creating sprites, filters, and uniforms
Appending canvas to the containerSetting up interaction and animation loops
Destroying the instance on unmountResponding to window resize events

​
Usage Example

The following is taken from the swiper sketch, which uses usePixiApp to build a full-screen PixiJS shader transition: 
<script setup lang="ts">
import { tryOnMounted } from '@vueuse/core'
import { useTemplateRef } from 'vue'
import { usePixiApp } from '@/composables/usePixiApp'

const pixiRef = useTemplateRef<HTMLDivElement>('pixiRef')
const { app, mountApp } = usePixiApp(pixiRef)

tryOnMounted(async () => {
  await mountApp({
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundAlpha: 0,
  })
  if (!app.value) return

  // app.value is a fully initialized PixiJS Application.
  // app.value.stage, app.value.renderer are available here.
})
</script>

<template>
  <div ref="pixiRef" />
</template>

​
Hot Reload

Calling mountApp() again when app.value is already set will destroy the previous instance — app.destroy(true, { children: true }) — before creating a new one. This makes it safe to call on HMR re-mount without leaking WebGL contexts or canvas elements.

​
Teardown

On component unmount, usePixiApp calls tryOnUnmounted (VueUse) to destroy the Application with { children: true }, which recursively destroys all textures and display objects attached to the stage. The tryOnUnmounted variant is used instead of the plain onUnmounted to remain safe in SSR environments where lifecycle hooks may not fire.

Build docs developers (and LLMs) love

Get started for freeTalk to us