vue3-pixi-components

> Use Vue 3 to create PixiJS applications

This library provides it's own vue renderer that will create PixiJS objects instead of html elments. It's still pretty early in development, but should already support a great amount of features from PixiJS.

``html



`

Install

`sh


install with npm

npm install vue3-pixi-components

install with yarn

yarn add vue3-pixi-components
`

Creating an application manually

`ts
import { createPixiApp } from "vue3-pixi-components";
import App from "./App.vue";

const pixiApp = new PIXI.Application();

document.body.appendChild(pixiApp.view);

const app = createPixiApp(App);

app.mount(pixiApp.stage);
`

Using the PixiViewport component

The PixiViewport component can be used to embed a pixi app into an existing vue app.

`html



`

Install the vite plugin

The vite plugin adds the ability to specify texture paths on sprites & other components that use textures, the same way as the src attribute on an image.

`ts
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { vuePixi, isCustomElement } from "vue3-pixi-components/vite";

export default defineConfig({
plugins: [
vue({
template: {
// remove the unknown element warnings
compilerOptions: { isCustomElement },
},
}),
vuePixi(),
],
});
`

$3

The vite plugin will detect any texture props containing the path to an image, and will replace it with a reference to a texture object.

`html

`

Components

The following PixiJS objects are supported out of the box:

* Container
* Sprite
* Graphics
* Text
* BitmapText
* TilingSprite
* AnimatedSprite
* Mesh
* NineSlicePlane
* SimpleMesh
* SimplePlane
* SimpleRope

Props

Most props will work just as the properties on the corresponding PixiJS objects. However, props that accept a Point are handeled a bit different. They can also be used with X/Y suffix (except for the position prop, which just uses the x/y props instead).
`html

`

Events

All events emitted by pixi objects are supported. Some of vue's event modifiers will work, like @click.left, however more often than not using them will cause an error. Adding an event listener to an element will currently automatically set the element's eventMode to static.

$3


When using there is a special @draw event.
This will set up a watchEffect internally that will automatically call the event handler again if any dependencies on the draw method have changed.

`html



``