Vue3 Pixi

Appearance

Vue 3 Pixi

Vue createRenderer for PixiJS


licenselicensepixi version

PixiJS v8(RC)

This version of vue3-pixi targets PixiJS v8. If you are migrating from v7, see the Migration Guide.

Features ​
  • Lightweight and flexible Vue 3 library for creating PixiJS applications.
  • Provides a Custom Vue Renderer that creates PixiJS objects instead of HTML elements.
  • Supports all PixiJS objects: Filter, Container, Sprite, Graphics, Text, and more.
  • Specify texture paths in templates to load texture objects automatically.
  • All events emitted by PixiJS objects are supported.
  • Includes an assets component for bundling resources and Composition Utilities for common patterns.
  • Create transition effects for PixiJS objects.

If you run into any problems, please create an issue on GitHub.

Install ​

bash
pnpm add pixi.js vue3-pixi@rc
bash
yarn add pixi.js vue3-pixi@rc
bash
npm install pixi.js vue3-pixi@rc

Initialize vue plugin ​

Add Vue plugin configuration to support custom elements and prevent unknown element warnings.

ts
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,
      },
    }),
  ],
})

Try it Online ​

You can fork this template on StackBlitz and try it without installing anything locally.

Loading...