### Install vue3-pixi and vue3-pixi-nuxt with npm

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/nuxtjs.md

Install the necessary packages using npm.

```bash
npm install vue3-pixi vue3-pixi-nuxt
```

--------------------------------

### Install vue3-pixi and vue3-pixi-nuxt with yarn

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/nuxtjs.md

Install the necessary packages using yarn.

```bash
yarn add vue3-pixi vue3-pixi-nuxt
```

--------------------------------

### Manual PixiJS Application Creation

Source: https://context7.com/hairyf/vue3-pixi/llms.txt

Create a PixiJS application manually and mount the Vue renderer to it for more control over initialization and lifecycle. This example demonstrates manual setup and providing the PixiJS app instance to Vue.

```ts
// main.ts
import { Application } from 'pixi.js'
import { appInjectKey, createApp } from 'vue3-pixi'
import App from './App.vue'

async function init() {
  // Create PixiJS application
  const pixiApp = new Application()

  await pixiApp.init({
    width: 800,
    height: 600,
    resizeTo: window,
    antialias: true,
    backgroundColor: 0x1099bb,
  })

  // Add canvas to DOM
  document.body.appendChild(pixiApp.canvas)

  // Create Vue app with custom renderer
  const app = createApp(App)

  // Provide PixiJS application instance
  app.provide(appInjectKey, pixiApp)

  // Mount to PixiJS stage
  app.mount(pixiApp.stage)
}

init()
```

--------------------------------

### Install vue3-pixi and vue3-pixi-nuxt with pnpm

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/nuxtjs.md

Install the necessary packages using pnpm.

```bash
pnpm add vue3-pixi vue3-pixi-nuxt
```

--------------------------------

### Install vue3-pixi

Source: https://github.com/hairyf/vue3-pixi/blob/main/README.md

Install the vue3-pixi library using your preferred package manager.

```sh
# with pnpm
pnpm add vue3-pixi
```

```sh
# with yarn
yarn add vue3-pixi
```

--------------------------------

### Install Dependencies with npm, Yarn, or pnpm

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/quick-start.md

Install the necessary PixiJS and vue3-pixi packages using your preferred package manager.

```bash
npm install pixi.js vue3-pixi@rc
```

```bash
yarn add pixi.js vue3-pixi@rc
```

```bash
pnpm add pixi.js vue3-pixi@rc
```

--------------------------------

### Basic Usage Example

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/elements/html-text.md

A simple example demonstrating how to use the HTMLText component with basic text and style properties.

```APIDOC
## Usage

```vue
<script setup>
const style = {
  fontFamily: 'Arial',
  fontSize: 24,
  fill: '#336699',
  wordWrap: true,
  wordWrapWidth: 400,
}
</script>

<template>
  <html-text
    text="Hello <b>World</b>!"
    :style="style"
    :x="50"
    :y="50"
  />
</template>
```
```

--------------------------------

### Install vue3-pixi with pnpm or yarn

Source: https://github.com/hairyf/vue3-pixi/blob/main/packages/core/README.md

Install the vue3-pixi library using your preferred package manager.

```sh
# with pnpm
pnpm add vue3-pixi

# with yarn
yarn add vue3-pixi
```

--------------------------------

### Install vue3-pixi with npm

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/introduction.md

Use this command to add pixi.js and vue3-pixi@rc to your project using npm.

```bash
npm install pixi.js vue3-pixi@rc
```

--------------------------------

### Basic Usage Example

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/elements/dom-container.md

Demonstrates how to create and use the DOMContainer component by imperatively creating an HTML input element.

```APIDOC
## Usage

Create the DOM element imperatively and pass it via the `element` prop:

```vue
<script setup>
import { onMounted, ref } from 'vue'

const element = ref<HTMLElement>()

onMounted(() => {
  const input = document.createElement('input')
  input.type = 'text'
  input.placeholder = 'Type here...'
  input.style.fontSize = '16px'
  input.style.padding = '8px'
  input.style.borderRadius = '4px'
  element.value = input
})
</script>

<template>
  <dom-container
    v-if="element"
    :element="element"
    :x="100"
    :y="100"
  />
</template>
```
```

--------------------------------

### Nuxt.js Integration Example

Source: https://context7.com/hairyf/vue3-pixi/llms.txt

Integrate vue3-pixi with Nuxt.js using the `vue3-pixi-nuxt` module for automatic component imports, client-only rendering, and compiler configuration. This example shows the nuxt.config.ts setup and a basic Nuxt page.

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['vue3-pixi-nuxt'],
})
```

```vue
<!-- pages/game.vue -->
<script setup>
// Components and composables are auto-imported
const score = ref(0)

onTick(({ deltaTime }) => {
  // Game loop logic
})
</script>

<template>
  <!-- Application is automatically client-only -->
  <Application :width="800" :height="600">
    <text
      :text="`Score: ${score}`"
      :style="{ fill: 'white', fontSize: 24 }"
      :x="10"
      :y="10"
    />
    <sprite texture="/assets/player.png" :x="400" :y="300" :anchor="0.5" />
  </Application>
</template>
```

--------------------------------

### Rotation and Anchor Example

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/elements/dom-container.md

Shows how to apply rotation and anchor transformations to the DOMContainer.

```APIDOC
### Rotation and Anchor

DOMContainer supports standard container transforms including rotation and anchor:

```vue
<template>
  <dom-container
    v-if="element"
    :element="element"
    :anchor="0.5"
    :rotation="0.2"
    :x="200"
    :y="200"
  />
</template>
```
```

--------------------------------

### v7 Loader Component Example

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/migration.md

Example of using the deprecated `<Loader>` component in v7 to load resources before rendering content.

```vue
<template>
  <Loader :resources="resources" @loaded="onLoaded">
    <Sprite texture="hero" />
  </Loader>
</template>
```

--------------------------------

### Dynamic Properties Configuration

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/elements/particle-container.md

Example of how to configure dynamic properties for ParticleContainer.

```APIDOC
## Dynamic Properties Configuration

### Description
`ParticleContainer` accepts a `dynamicProperties` option at creation to control which properties can be updated after the initial render. This improves performance by skipping upload of static properties.

### Request Body Example
```json
{
  "dynamicProperties": {
    "vertex": true,
    "position": true,
    "rotation": false,
    "uvs": false,
    "tint": false
  }
}
```
```

--------------------------------

### Vue3 Pixi Application Setup

Source: https://context7.com/hairyf/vue3-pixi/llms.txt

Sets up the root PixiJS application and canvas using the `<Application>` component. Supports configuration for renderer options and includes a basic sprite with click handling.

```vue
<script setup lang="ts">
import { Rectangle } from 'pixi.js'
import { Application } from 'vue3-pixi'
import textureUrl from '@/assets/myTexture.png'

const hitArea = new Rectangle(0, 0, 64, 64)

function onClick() {
  console.log('sprite clicked!')
}
</script>

<template>
  <Application
    :width="640"
    :height="480"
    :background-color="0x1099bb"
    :antialias="true"
  >
    <container>
      <sprite :texture="textureUrl" :hit-area="hitArea" @click="onClick" />
    </container>
  </Application>
</template>
```

--------------------------------

### Install vue3-pixi with pnpm

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/introduction.md

Use this command to add pixi.js and vue3-pixi@rc to your project using pnpm.

```bash
pnpm add pixi.js vue3-pixi@rc
```

--------------------------------

### Install vue3-pixi with yarn

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/introduction.md

Use this command to add pixi.js and vue3-pixi@rc to your project using yarn.

```bash
yarn add pixi.js vue3-pixi@rc
```

--------------------------------

### Install PixiJS v8 and Vue3-Pixi v1

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/migration.md

Update your project dependencies by uninstalling old packages and installing the new versions of pixi.js and vue3-pixi.

```bash
# Remove old packages
npm uninstall pixi.js vue3-pixi

# Install new versions
npm install pixi.js@^8.0.0 vue3-pixi@^1.0.0
```

--------------------------------

### Custom ShockwaveFilter Example

Source: https://github.com/hairyf/vue3-pixi/blob/main/packages/core/README.md

Shows how to use custom filters like ShockwaveFilter by specifying the filter component with the 'is' attribute. Requires importing the filter from 'pixi-filters'.

```html
<script setup>
import { ShockwaveFilter } from 'pixi-filters'
function renderShockwaveFilter(props: any) {
  return new ShockwaveFilter(
    props.center,
    {
      radius: props.radius,wavelength: props.wavelength,
      amplitude: props.amplitude, speed: props.speed,
    },
    props.time,
  )
}

const time = ref(0)
const center = ref([20, 30])
</script>

<sprite texture="@/assets/background.png">
  <filter :is="renderShockwaveFilter" :center="center" :time="time" />
</sprite>
```

--------------------------------

### Rich HTML Content Example

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/elements/html-text.md

An example showcasing the use of inline HTML tags and CSS styles within the HTMLText component.

```APIDOC
### Rich HTML Content

HTMLText supports inline HTML tags for formatting:

```vue
<template>
  <html-text
    text="<h2>Title</h2><p>Styled with <em>CSS</em> and <span style='color:red'>HTML</span></p>"
    :style="{ fontSize: 16, wordWrap: true, wordWrapWidth: 300 }"
  />
</template>
```
```

--------------------------------

### SimplePlane Migration from v7 to v8

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/migration.md

Shows the migration path for the `<simple-plane>` component, recommending `<mesh-plane>` or a manual `<mesh>` setup in v8.

```vue
<!-- v7 -->
<simple-plane :texture="texture" :vertices-x="10" :vertices-y="10" />

<!-- v8 (recommended) -->
<mesh-plane :texture="texture" :vertices-x="10" :vertices-y="10" />
```

```vue
<!-- v8 (alternative: manual geometry) -->
<script setup>
import { PlaneGeometry } from 'pixi.js'

const geometry = new PlaneGeometry({ width: 100, height: 100, verticesX: 10, verticesY: 10 })
</script>

<mesh :geometry="geometry" :texture="texture" />
```

--------------------------------

### Using the useScreen Composable

Source: https://github.com/hairyf/vue3-pixi/blob/main/packages/core/README.md

Explains how to use the `useScreen` composable to get a reactive `Ref<Rectangle>` representing the application's screen dimensions.

```html
<script setup lang="ts">
import { useScreen } from 'vue3-pixi'

const screen = useScreen()
</script>

<template>
  <sprite :x="screen.width / 2" :texture="textures.flowerTop" />
</template>
```

--------------------------------

### v8 Assets Component for Multiple Assets

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/migration.md

Example of using the `<assets>` component in v8 to load multiple assets simultaneously.

```vue
<template>
  <assets
    :entry="[
      { alias: 'hero', src: '/hero.png' },
      { alias: 'bg', src: '/background.jpg' },
    ]"
    @loaded="onLoaded"
  >
    <sprite texture="hero" />
    <sprite texture="bg" />
  </assets>
</template>
```

--------------------------------

### v8 Event Mode Configuration

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/migration.md

Example demonstrating the requirement to explicitly set the `event-mode` prop on interactive elements in v8.

```vue
<sprite :texture="texture" event-mode="static" @pointerdown="onClick" />
```

--------------------------------

### Basic Usage of <Application> Component

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/quick-start.md

Embed a PixiJS application into a Vue app using the `<Application>` component. This example shows how to include a sprite with a texture and a click handler.

```html
<script setup lang="ts">
import { Rectangle } from "pixi.js";
import { Application } from "vue3-pixi";
import textureUrl from "@/assets/myTexture.png";

const hitArea = new Rectangle(0, 0, 64, 64);

function onClick() {
  console.log('sprite clicked!');
}
</script>

<template>
  <Application :width="640" :height="480">
    <container>
      <sprite :texture="textureUrl" :hit-area="hitArea" @click="onClick" />
    </container>
  </Application>
</template>
```

--------------------------------

### Basic Vue3-Pixi Usage in NuxtJS

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/nuxtjs.md

Example of using the `<Application>` component and `<text>` element within a NuxtJS template.

```vue
<script setup>
</script>

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

--------------------------------

### Access PixiJS Application Instance

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/composition-api/use-application.md

Use `useApplication` to get a ref to the PixiJS Application. Access the instance via `.value` and ensure it's used within `onMounted` or a watcher to avoid accessing an undefined value.

```vue
<script setup lang="ts">
import { onMounted } from 'vue'
import { useApplication } from 'vue3-pixi'

const app = useApplication()

onMounted(() => {
  // Access the application instance via .value
  app.value.renderer.background.color = 0x061639
})
</script>
```

--------------------------------

### SplitBitmapText Component

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/elements/split-text.md

Illustrates the use of the SplitBitmapText component for bitmap font text, including a wave animation example.

```APIDOC
## SplitBitmapText Component

### Description
Creates a `SplitBitmapText` element that breaks bitmap font text into individual character containers, allowing for per-character animation.

### Usage
Load the bitmap font first using `<assets>`, then use the `<split-bitmap-text>` component. Access its `.chars` array via a ref for individual character manipulation.

### Attributes
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **text** (string) - Required - The text string to split into characters.
- **style** (object) - Optional - Bitmap text style (fontFamily, fontSize, fill, etc.). Set at creation time.
- **round-pixels** (boolean) - Optional - Whether to round pixel positions for sharper rendering. Defaults to `false`.

### Request Example
```vue
<script setup>
import { SplitBitmapText } from 'pixi.js'
import { ref } from 'vue'
import { onTick } from 'vue3-pixi'

const splitRef = ref<SplitBitmapText>()
let frame = 0

onTick(() => {
  if (!splitRef.value)
    return
  frame++
  for (const [i, char] of splitRef.value.chars.entries()) {
    char.y = Math.sin((frame + i * 4) * 0.05) * 5
  }
})
</script>

<template>
  <assets alias="desyrel" entry="https://pixijs.com/assets/bitmap-font/desyrel.xml">
    <SplitBitmapText
      ref="splitRef"
      text="Bitmap wave!"
      :style="{ fontFamily: 'Desyrel', fontSize: 60, fill: 'white' }"
      :x="50"
      :y="100"
    />
  </assets>
</template>
```

### Response
#### Success Response (200)
- **chars** (array) - An array of individual character display objects. Animate these for per-character effects.

#### Response Example
N/A (Component rendering, not an API response)

### Events
- **effect** (function) - Custom render function `(el: SplitText | SplitBitmapText): void`

### Instance Properties
- **chars** (array) - Array of individual character display objects.
```

--------------------------------

### Custom Shader with Geometry and Rotation

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/elements/mesh.md

Create a custom shader with specified geometry and animate its rotation. Ensure 'pixi.js' and 'vue3-pixi' are installed and imported.

```vue
<script setup>
import { Geometry, Shader } from 'pixi.js'
import { ref } from 'vue'
import { onTick } from 'vue3-pixi'

const rotation = ref(0)

const geometry = new Geometry({
  attributes: {
    aPosition: [-100, -50, 100, -50, 0, 100],
  },
})

const shader = Shader.from({
  gl: {
    vertex: `
      in vec2 aPosition;
      uniform mat3 uProjectionMatrix;
      uniform mat3 uWorldTransformMatrix;
      uniform mat3 uTransformMatrix;
      void main() {
        mat3 mvp = uProjectionMatrix * uWorldTransformMatrix * uTransformMatrix;
        gl_Position = vec4((mvp * vec3(aPosition, 1.0)).xy, 0.0, 1.0);
      }
    `,
    fragment: `
      void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    `,
  },
})

onTick(({ deltaTime }) => {
  rotation.value += 0.01 * deltaTime
})
</script>

<template>
  <mesh :geometry="geometry" :shader="shader" :x="400" :y="300" :rotation="rotation" />
</template>
```

--------------------------------

### SplitText Component

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/elements/split-text.md

Demonstrates the usage of the SplitText component for standard canvas text, including a wave animation example.

```APIDOC
## SplitText Component

### Description
Creates a `SplitText` element that breaks standard canvas-rendered text into individual character containers, allowing for per-character animation.

### Usage
Use the `<split-text>` component and access its `.chars` array via a ref for individual character manipulation.

### Attributes
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **text** (string) - Required - The text string to split into characters.
- **style** (object) - Optional - Text style options (font, fill, wordWrap, etc.). Set at creation time.
- **round-pixels** (boolean) - Optional - Whether to round pixel positions for sharper rendering. Defaults to `false`.

### Request Example
```vue
<script setup>
import { SplitText } from 'pixi.js'
import { ref } from 'vue'
import { onTick } from 'vue3-pixi'

const splitRef = ref<SplitText>()
let frame = 0

onTick(() => {
  if (!splitRef.value)
    return
  frame++
  const chars = splitRef.value.chars
  for (let i = 0; i < chars.length; i++) {
    chars[i].y = Math.sin((frame + i * 4) * 0.05) * 5
  }
})
</script>

<template>
  <SplitText
    ref="splitRef"
    text="Wave animation!"
    :style="{ fontFamily: 'Arial', fontSize: 32, fill: 'white' }"
    :x="50"
    :y="100"
  />
</template>
```

### Response
#### Success Response (200)
- **chars** (array) - An array of individual character display objects. Animate these for per-character effects.

#### Response Example
N/A (Component rendering, not an API response)

### Events
- **effect** (function) - Custom render function `(el: SplitText | SplitBitmapText): void`

### Instance Properties
- **chars** (array) - Array of individual character display objects.
```

--------------------------------

### v8 Assets Component for Single Asset

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/migration.md

Example of using the new `<assets>` component in v8 to load a single asset and gate rendering until it's loaded.

```vue
<template>
  <assets alias="hero" entry="/hero.png" @loaded="onLoaded">
    <sprite texture="hero" />
  </assets>
</template>
```

--------------------------------

### v8 Global Pointer Move Event

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/migration.md

Example of using `@globalpointermove` in v8 for canvas-wide pointer tracking, as `@pointermove` now only fires when the pointer is over the element.

```vue
<!-- v8: use globalpointermove for canvas-wide tracking -->
<sprite :texture="texture" event-mode="static" @globalpointermove="onMove" />
```

--------------------------------

### Using the useApplication Composable

Source: https://github.com/hairyf/vue3-pixi/blob/main/packages/core/README.md

Demonstrates how to obtain the current Pixi application instance using the `useApplication` composable hook. The application instance is available via a ref.

```html
<script setup lang="ts">
import { Application, useApplication } from "vue3-pixi";
import { onMounted } from 'vue'

const app = useApplication()

onMounted(() => {
  app.value.ticker // { ... }
})
</script>

<template>
  <Application :width="640" :height="480">
    <!-- ... -->
  </Application>
</template>
```

--------------------------------

### Asynchronous Application Initialization in PixiJS v8

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/troubleshooting.md

In PixiJS v8, the Application is initialized asynchronously using `app.init()`. The `<Application>` component handles this automatically. Manual initialization requires an `await` call.

```ts
const pixiApp = new Application()
await pixiApp.init({ width: 800, height: 600 })
```

--------------------------------

### Get PixiJS Stage Container

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/composition-api/use-stage.md

Import and call useStage to get a Ref to the application's stage. The stage.value is the root Container.

```vue
<script setup lang="ts">
import { useStage } from 'vue3-pixi'

const stage = useStage()

// stage.value is the root Container of the application
</script>
```

--------------------------------

### v7 @render Event Example

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/migration.md

Example of using the deprecated `@render` event in v7 to apply continuous updates to a sprite's rotation.

```vue
<!-- v7 -->
<sprite :texture="texture" @render="(el) => { el.rotation += 0.01 }" />
```

--------------------------------

### v8 @effect Event Example

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/migration.md

Example of using the new `@effect` event in v8, which replaces `@render`, to apply continuous updates to a sprite's rotation.

```vue
<!-- v8 -->
<sprite :texture="texture" @effect="(el) => { el.rotation += 0.01 }" />
```

--------------------------------

### Get PixiJS Renderer Instance

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/composition-api/use-renderer.md

Import and call `useRenderer` to get a `Ref` to the PixiJS Renderer. Access the renderer value in lifecycle hooks like `onMounted` or watchers.

```vue
<script setup lang="ts">
import { useRenderer } from 'vue3-pixi'

const renderer = useRenderer()

// Access in onMounted or a watcher
// renderer.value.background.color = 0x061639
</script>
```

--------------------------------

### Get Reactive Screen Dimensions with useScreen

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/composition-api/use-screen.md

Use `useScreen` to get a reactive `Ref<Rectangle>` for the application's screen. Access dimensions via `.value` in script or directly in the template due to auto-unwrapping.

```vue
<script setup lang="ts">
import { useScreen } from 'vue3-pixi'

const screen = useScreen()

// In script, access via .value
// screen.value.width, screen.value.height
</script>

<template>
  <!-- In template, auto-unwrapped -->
  <sprite :x="screen.width / 2" :texture="textures.flowerTop" />
</template>
```

--------------------------------

### Custom Shaders with GLSL/WGSL

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/elements/mesh.md

Demonstrates how to create and use custom shaders with the Mesh component, supporting both WebGL (GLSL) and WebGPU (WGSL).

```APIDOC
## Custom Shaders

PixiJS v8 supports both GLSL (WebGL) and WGSL (WebGPU) shaders. Create shaders imperatively in `<script setup>` and pass them to `<mesh>`:

```vue
<script setup>
import { Geometry, Shader } from 'pixi.js'
import { ref } from 'vue'
import { onTick } from 'vue3-pixi'

const rotation = ref(0)

const geometry = new Geometry({
  attributes: {
    aPosition: [-100, -50, 100, -50, 0, 100],
  },
})

const shader = Shader.from({
  gl: {
    vertex: `
      in vec2 aPosition;
      uniform mat3 uProjectionMatrix;
      uniform mat3 uWorldTransformMatrix;
      uniform mat3 uTransformMatrix;
      void main() {
        mat3 mvp = uProjectionMatrix * uWorldTransformMatrix * uTransformMatrix;
        gl_Position = vec4((mvp * vec3(aPosition, 1.0)).xy, 0.0, 1.0);
      }
    `,
    fragment: `
      void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    `,
  },
})

onTick(({ deltaTime }) => {
  rotation.value += 0.01 * deltaTime
})
</script>

<template>
  <mesh :geometry="geometry" :shader="shader" :x="400" :y="300" :rotation="rotation" />
</template>
```

### Dual GLSL + WGSL Support

Provide both `gl` and `gpu` properties in `Shader.from()` to support both WebGL and WebGPU renderers:

```ts
const shader = Shader.from({
  gl: { vertex: glslVertex, fragment: glslFragment },
  gpu: {
    vertex: { entryPoint: 'main', source: wgslSource },
    fragment: { entryPoint: 'main', source: wgslSource },
  },
})
```

### Texture Sampling

When a shader needs textures, load them before creating the shader (v8 requires resources to be bound at creation time):

```ts
import { Assets, Shader } from 'pixi.js'

const texture = await Assets.load('https://example.com/image.png')

const shader = Shader.from({
  gl: { vertex, fragment },
  resources: {
    uTexture: texture.source,
  },
})
```

### Uniform Groups

Pass uniforms via the `resources` property:

```ts
const shader = Shader.from({
  gl: { vertex, fragment },
  resources: {
    myUniforms: {
      uTime: { value: 0, type: 'f32' },
      uResolution: { value: [800, 600, 1], type: 'vec3<f32>' },
    },
  },
})

// Update uniforms in onTick:
onTick(() => {
  shader.resources.myUniforms.uniforms.uTime += 0.016
})
```
```

--------------------------------

### Creating and Managing Particles in ParticleContainer

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/elements/particle-container.md

Demonstrates imperative creation of Particle instances and adding them to a ParticleContainer. It also shows how to update particle positions on each tick.

```vue
<script setup>
import { Particle, Texture } from 'pixi.js'
import { ref } from 'vue'
import { onTick } from 'vue3-pixi'

const containerRef = ref()

function onEffect(pc) {
  const particles = Array.from({ length: 100 }, () => {
    const p = new Particle({ texture: Texture.from('mySprite') })
    p.x = Math.random() * 400
    p.y = Math.random() * 300
    return p
  })
  pc.addParticle(...particles)
}

onTick(() => {
  if (!containerRef.value)
    return
  for (const p of containerRef.value.particleChildren) {
    p.y += 1
  }
})
</script>

<template>
  <particle-container ref="containerRef" @effect="onEffect" />
</template>
```

--------------------------------

### Manually Creating a PixiJS Application with Custom Renderer

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/quick-start.md

Initialize a PixiJS application manually using the custom renderer provided by vue3-pixi. This involves creating a PixiJS Application instance, initializing it, and then mounting the Vue app to its stage.

```typescript
import { Application } from 'pixi.js'
import { appInjectKey, createApp } from 'vue3-pixi'
import App from './App.vue'

const pixiApp = new Application()

await pixiApp.init({
  resizeTo: window,
  antialias: true,
})

document.body.appendChild(pixiApp.canvas)

const app = createApp(App)

app.provide(appInjectKey, pixiApp)
app.mount(pixiApp.stage)
```

--------------------------------

### v7 Pointer Move Event

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/migration.md

Example of `@pointermove` in v7, which fired for pointer movements anywhere on the canvas.

```vue
<!-- v7: pointermove fired everywhere -->
<sprite :texture="texture" @pointermove="onMove" />
```

--------------------------------

### Loading Multiple Assets with Assets Component

Source: https://github.com/hairyf/vue3-pixi/blob/main/packages/core/README.md

Demonstrates using the `<assets>` component to load multiple resources with aliases and sources. Provides a default slot for content and a fallback slot for loading progress.

```html
<template>
  <assets
    :entry="[
      { alias: 'flowerTop', src: '/assets/flowerTop.png' },
      { alias: 'eggHead', src: '/assets/eggHead.png' },
    ]">
    <template #default>
      <sprite texture="flowerTop" />
      <sprite texture="eggHead" />
    </template>
    <template #fallback="{ progress }">
      <text :style="{ fill: 'white' }">Loading... {{ progress }}</text>
    </template>
  </assets>
</template>
```

--------------------------------

### PerspectiveMesh Instance Methods

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/elements/perspective-mesh.md

Documentation for the instance methods available on a PerspectiveMesh object, specifically `setCorners`.

```APIDOC
## PerspectiveMesh Instance Methods

### `setCorners`

#### Signature

`setCorners(x0, y0, x1, y1, x2, y2, x3, y3): void`

#### Description

Sets the four corner positions (top-left, top-right, bottom-right, bottom-left) to apply perspective distortion to the mesh. This method is typically called each frame to animate the perspective transformation.
```

--------------------------------

### Loading a Single Asset with Assets Component

Source: https://github.com/hairyf/vue3-pixi/blob/main/packages/core/README.md

Shows how to load a single asset using the `alias` and `entry` props of the `<assets>` component.

```html
<assets alias="bunny" entry="/assets/bunny.png">
  <sprite texture="bunny" />
</assets>
```

--------------------------------

### useApplication Hook

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/composition-api/use-application.md

Returns a Ref<Application> to the current PixiJS Application instance. Access the application instance via `.value`. Note that `app.value` may be undefined until the `<Application>` component has mounted. Always access it inside `onMounted` or use a watcher.

```APIDOC
## useApplication

### Description
Returns a `Ref<Application>` to the current PixiJS [Application](https://pixijs.download/release/docs/app.Application.html) instance.

### Type Signature
```ts
function useApplication<T = Application>(): Ref<T>
```

### Usage Example
```vue
<script setup lang="ts">
import { onMounted } from 'vue'
import { useApplication } from 'vue3-pixi'

const app = useApplication()

onMounted(() => {
  // Access the application instance via .value
  app.value.renderer.background.color = 0x061639
})
</script>
```

### Warning
`app.value` may be `undefined` until the `<Application>` component has mounted. Always access it inside `onMounted` or use a watcher.
```

--------------------------------

### Initialize vue plugin for vue3-pixi

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/introduction.md

Configure Vite to support custom elements and prevent unknown element warnings by including the compilerOptions from vue3-pixi.

```typescript
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import { compilerOptions } from 'vue3-pixi'

export default defineConfig({
  plugins: [
    vue({
      template: {
        // support for custom elements and remove the unknown element warnings
        compilerOptions,
      },
    }),
  ],
})
```

--------------------------------

### Using BlurFilter with Container

Source: https://github.com/hairyf/vue3-pixi/blob/main/packages/core/README.md

Demonstrates how to apply a BlurFilter to a container. Ensure the Filter tag is placed under the Container that sets the filter.

```html
<script setup>
const showBlur = ref(true)
</script>

<container>
  <blur-filter :quality="3" :blur="5" v-if="showBlur" />
</container>
```

--------------------------------

### ParticleContainer Options Migration from v7 to v8

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/migration.md

Illustrates the change in configuration options for `<particle-container>`, from `maxSize` and `properties` in v7 to `dynamicProperties` in v8.

```vue
<!-- v7 -->
<particle-container :max-size="10000" :properties="{ scale: true, position: true }">

<!-- v8 -->
<particle-container :dynamic-properties="{ position: true, rotation: true, vertex: true, uvs: true, color: true }">
```

--------------------------------

### AnimatedTransition Component Example

Source: https://context7.com/hairyf/vue3-pixi/llms.txt

Use the AnimatedTransition component for enter/leave animations of PixiJS elements. Configure duration, before-enter, enter, and leave properties with easing presets.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { Application, AnimatedTransition, EasePresets } from 'vue3-pixi'

const show = ref(true)
</script>

<template>
  <Application :width="400" :height="300">
    <AnimatedTransition
      :duration="500"
      :before-enter="{ alpha: 0, scaleX: 0.25, scaleY: 0.25 }"
      :enter="{
        ease: EasePresets.easeOutBack,
        alpha: 1,
        scaleX: 1,
        scaleY: 1
      }"
      :leave="{
        delay: 100,
        ease: EasePresets.easeInCubic,
        alpha: 0,
        scaleX: 0,
        scaleY: 0
      }"
    >
      <sprite
        v-if="show"
        texture="/assets/bunny.png"
        :x="200"
        :y="150"
        :anchor="0.5"
      />
    </AnimatedTransition>
  </Application>

  <button @click="show = !show">Toggle Sprite</button>
</template>
```

--------------------------------

### Enable WebGPU Renderer in Application Component

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/migration.md

Opt into the WebGPU renderer by setting the 'preference' prop to 'webgpu' on the Application component. This enables hardware-accelerated rendering using WebGPU.

```vue
<Application :width="800" :height="600" preference="webgpu">
  <!- your scene ->
</Application>
```

--------------------------------

### Apply Advanced Blend Mode to Sprite

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/elements/filters.md

Sets an advanced blend mode on a sprite after importing the necessary extension. 'color-burn' is an example of an advanced blend mode.

```vue
<template>
  <sprite texture="overlay" blend-mode="color-burn" />
</template>
```

--------------------------------

### Using PixiJS Namespaces

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/api-reference/renderer.md

To prevent tag conflicts, use the 'pixi-' prefix or capitalize the first letter of PixiJS elements.

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

--------------------------------

### Configure Blur Filter Properties

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/elements/filters.md

Example of configuring blur intensity and quality. The 'blur' property controls the strength, and 'quality' affects the number of passes for a smoother effect.

```vue
<template>
  <sprite texture="photo">
    <blur-filter :blur="4" :quality="4" />
  </sprite>
</template>
```

--------------------------------

### Application Props

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/components/application.md

Configuration options for the PixiJS Application component.

```APIDOC
## Application Props

This section details the available properties for configuring the PixiJS Application.

### Parameters

#### Request Body

- **width** (number | string) - Optional - The width of the renderer. Defaults to `undefined`.
- **height** (number | string) - Optional - The height of the renderer. Defaults to `undefined`.
- **background** (<api-color />) - Optional - The background color of the renderer.
- **backgroundColor** (<api-color />) - Optional - The background color of the renderer. Defaults to `0x000000`.
- **backgroundAlpha** (number) - Optional - The background alpha of the renderer. Defaults to `1`.
- **resolution** (number) - Optional - The resolution / device pixel ratio of the renderer. Defaults to `1`.
- **preference** (string) - Optional - Which rendering backend to prefer. Accepts `'webgl'` or `'webgpu'`. Defaults to `'webgl'`.
- **antialias** (boolean) - Optional - Whether to enable antialiasing. Defaults to `undefined`.
- **autoDensity** (boolean) - Optional - Whether to resize the CSS dimensions of the canvas to match the resolution. Defaults to `undefined`.
- **autoStart** (boolean) - Optional - Whether to automatically start the ticker. Defaults to `true`.
- **clearBeforeRender** (boolean) - Optional - Whether to clear the canvas before each render. Defaults to `undefined`.
- **hello** (boolean) - Optional - Whether to log the PixiJS version to the console. Defaults to `undefined`.
- **preserveDrawingBuffer** (boolean) - Optional - Whether to preserve the drawing buffer. Defaults to `undefined`.
- **roundPixels** (boolean) - Optional - Whether to round pixel values. Defaults to `undefined`.
- **resizeTo** (HTMLElement | Window) - Optional - Element to auto-resize the renderer to. Defaults to `undefined`.

> For more details on props, refer to the [PixiJS ApplicationOptions](https://pixijs.download/release/docs/app.Application.html).
```

--------------------------------

### Basic HTMLText Usage

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/elements/html-text.md

Demonstrates how to use the HTMLText component with basic text and style properties. Ensure the style object is correctly defined.

```vue
<script setup>
const style = {
  fontFamily: 'Arial',
  fontSize: 24,
  fill: '#336699',
  wordWrap: true,
  wordWrapWidth: 400,
}
</script>

<template>
  <html-text
    text="Hello <b>World</b>!"
    :style="style"
    :x="50"
    :y="50"
  />
</template>
```

--------------------------------

### Basic GraphicsContext Usage in Vue

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/elements/graphics-context.md

Define shared drawing instructions using GraphicsContext and reuse them across multiple Graphics components. This setup is ideal for rendering identical shapes efficiently.

```vue
<script setup lang="ts">
import { ref } from 'vue'

const sharedCtx = ref()
</script>

<template>
  <!-- Define shared drawing instructions -->
  <graphics-context
    ref="sharedCtx"
    @effect="(ctx) => ctx.rect(0, 0, 50, 50).fill('red')"
  />

  <!-- Reuse the context across multiple Graphics instances -->
  <graphics :context="sharedCtx" :x="0" :y="0" />
  <graphics :context="sharedCtx" :x="100" :y="0" />
  <graphics :context="sharedCtx" :x="200" :y="0" />
</template>
```

--------------------------------

### Register Custom PixiJS Element

Source: https://context7.com/hairyf/vue3-pixi/llms.txt

Register custom PixiJS classes or third-party objects as vue3-pixi elements using the renderer's `use` method. This example shows registering a custom `YellowText` class.

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

// Custom class extending PixiJS
class YellowText extends Text {
  constructor(options: any) {
    super(options)
    this.style.fill = 'yellow'
  }
}

// Register custom element
renderer.use({
  name: 'YellowText',
  createElement: (props) => new YellowText({
    text: props.text,
    style: props.style
  }),
  patchProp(el, key, prevValue, nextValue) {
    // Handle special props here
    if (key === 'customProp') {
      // Custom prop handling
      return true
    }
    // Fallback to default prop patching
    return defPatchProp(el, key, prevValue, nextValue)
  },
})
```

```vue
<template>
  <Application :width="400" :height="200">
    <!-- Use custom element -->
    <yellow-text
      text="I'm yellow!"
      :x="100"
      :y="100"
      :style="{ fontSize: 32 }"
    />
  </Application>
</template>
```

--------------------------------

### Dual GLSL and WGSL Shader Support

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/elements/mesh.md

Provide both 'gl' and 'gpu' properties in Shader.from() to support both WebGL and WebGPU renderers. Ensure correct entry points and source code for each.

```typescript
const shader = Shader.from({
  gl: { vertex: glslVertex, fragment: glslFragment },
  gpu: {
    vertex: { entryPoint: 'main', source: wgslSource },
    fragment: { entryPoint: 'main', source: wgslSource },
  },
})
```

--------------------------------

### Create and Embed Input Element with DOMContainer

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/elements/dom-container.md

Imperatively create an HTML input element and pass it to the DOMContainer component using the 'element' prop. This example demonstrates setting up the input's properties and styles before mounting.

```vue
<script setup>
import { onMounted, ref } from 'vue'

const element = ref<HTMLElement>()

onMounted(() => {
  const input = document.createElement('input')
  input.type = 'text'
  input.placeholder = 'Type here...'
  input.style.fontSize = '16px'
  input.style.padding = '8px'
  input.style.borderRadius = '4px'
  element.value = input
})
</script>

<template>
  <dom-container
    v-if="element"
    :element="element"
    :x="100"
    :y="100"
  />
</template>
```

--------------------------------

### Add Callback to PixiJS Ticker with onTick

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/composition-api/on-tick.md

Use onTick to add a callback to the application's ticker. It automatically removes itself on unmount. The callback receives the ticker instance, and ticker.deltaTime can be used to get the frame delta.

```vue
<script lang="ts" setup>
import { ref } from 'vue'
import { onTick } from 'vue3-pixi'

const x = ref(0)

onTick((ticker) => {
  x.value += ticker.deltaTime
})
</script>
```

--------------------------------

### ParticleContainer Instance Methods

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/elements/particle-container.md

Methods available on the ParticleContainer instance for managing particles.

```APIDOC
## ParticleContainer Instance Methods

### Description
Methods available on the ParticleContainer instance for managing particles.

### Methods
- **addParticle**
  - Signature: `(...particles: Particle[]): void`
  - Description: Add particles to the container.
- **removeParticle**
  - Signature: `(...particles: Particle[]): void`
  - Description: Remove particles from the container.
```

--------------------------------

### Load Assets with Aliases

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/components/assets.md

Use the `alias` and `entry` props to specify aliases for resources. This allows you to reference loaded assets by their alias.

```vue
<template>
  <assets
    :entry="[
      { alias: 'flowerTop', src: '/assets/flowerTop.png' },
      { alias: 'eggHead', src: '/assets/eggHead.png' },
    ]">
    <sprite texture="flowerTop" />
    <sprite texture="eggHead" />
  </assets>
</template>
```

--------------------------------

### Applying Built-in PixiJS Filters

Source: https://context7.com/hairyf/vue3-pixi/llms.txt

Demonstrates how to apply built-in PixiJS filters like BlurFilter, AlphaFilter, ColorMatrixFilter, and NoiseFilter to sprites and containers. Use refs to access and manipulate filter properties dynamically.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import type { ColorMatrixFilter } from 'pixi.js'
import { Application, onTick } from 'vue3-pixi'
// For custom filters from pixi-filters
// import { DropShadowFilter } from 'pixi-filters'

const blurStrength = ref(4)
const colorFilterRef = ref<ColorMatrixFilter>()
let count = 0

onTick(() => {
  if (colorFilterRef.value) {
    count += 0.1
    colorFilterRef.value.matrix[1] = Math.sin(count) * 3
  }
})

// Custom filter factory
// const createShadow = () => new DropShadowFilter({ offset: { x: 4, y: 4 }, blur: 2 })
</script>

<template>
  <Application :width="400" :height="300">
    <!-- BlurFilter -->
    <sprite texture="/assets/photo.png" :x="50" :y="50">
      <blur-filter :blur="blurStrength" :quality="4" />
    </sprite>

    <!-- AlphaFilter on container -->
    <container :x="200" :y="50">
      <alpha-filter :alpha="0.5" />
      <sprite texture="/assets/star.png" />
      <sprite texture="/assets/star.png" :x="30" />
    </container>

    <!-- ColorMatrixFilter with ref access -->
    <sprite texture="/assets/character.png" :x="50" :y="150">
      <color-matrix-filter ref="colorFilterRef" />
    </sprite>

    <!-- NoiseFilter -->
    <sprite texture="/assets/bg.png" :x="200" :y="150">
      <noise-filter :noise="0.3" :seed="Math.random()" />
    </sprite>

    <!-- Custom filter via :is prop -->
    <!-- <sprite texture="/assets/logo.png">
      <filter :is="createShadow" />
    </sprite> -->
  </Application>
</template>
```

--------------------------------

### Texture Sampling in Shaders

Source: https://github.com/hairyf/vue3-pixi/blob/main/docs/guide/elements/mesh.md

Load textures using Assets.load() before creating the shader. The 'resources' property in Shader.from() is used to bind texture sources. Requires PixiJS v8.

```typescript
import { Assets, Shader } from 'pixi.js'

const texture = await Assets.load('https://example.com/image.png')

const shader = Shader.from({
  gl: { vertex, fragment },
  resources: {
    uTexture: texture.source,
  },
})
```