> Use Vue 3 to create PixiJS applications
npm install 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
`
`shinstall with npm
npm install 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
``