Vue 3 Pixi

Vue createRenderer for PixiJS

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, such as Filter, Container, Sprite, Graphics, Text, etc
• 🧑‍💻 Support specifying texture paths in templates to load texture objects
• ✨ All events emitted by PixiJS objects are supported
• 🗃️ Offers Loader component for bundling assets and Feature Rich Composition Utilities.
• 💫 Create different transition effects in conjunction with Transition.

It is still a work in progress but it should be usable enough for real projects. If you run into any problems please don’t hesitate to create an issue on GitHub.

Install ​

npm install pixi.js vue3-pixi

yarn add pixi.js vue3-pixi

pnpm add pixi.js vue3-pixi

Initialize vue plugin ​

add Vue plugin configuration to support custom elements, prevent parsing exceptions, and support parsing the texture attribute, just like the src attribute of an img.

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

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

Try it Online ​

You can fork this template example on StackBlitz and play with it 😋 without installing anything locally.