Vue3 Pixi

Appearance

Vue 3 Pixi

Vue createRenderer for PixiJS


licenselicensepixi version
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 ​

bash
npm install pixi.js vue3-pixi
bash
yarn add pixi.js vue3-pixi
bash
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.

ts
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.

Loading...