Vue Runtime Pixi

Vue createRenderer for PixiJS
_{Write PIXI applications using Vue SFC 👌}

📑 News!

• Full Vue3 support including Vue Router、Pinia、VueUse
• Typescript friendly

🌈 DEMO

• exmaple-animation1
• exmaple-animation2
• exmaple-animation3
• exmaple-animation4
• exmaple-snake 🐍
• exmaple-plane-fights 🚀

⚙️ Installation

npm i -S vue-runtime-pixi vue pixi.js

🦄 Use

<template>
  <h1>vue-runtime-pixi</h1>
  <Stage>
    <Text text="😉test……" style="fill: red" />
  </Stage>
</template>

<script setup lang="ts">
import { Stage } from 'vue-runtime-pixi'
</script>

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { isPIXITag } from 'vue-runtime-pixi'

export default defineConfig({
  plugins: [vue({ template: { compilerOptions: { isCustomElement: isPIXITag } } })]
})

🦄 Used with VueRouter

<template>
  <h1>vue-runtime-pixi</h1>
  <Stage :uses="[router]">
    <router-view />
  </Stage>
</template>

<script setup lang="ts">
import { h } from 'vue'
import { Stage } from 'vue-runtime-pixi'
import { createRouter, createWebHashHistory, RouterView } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/', redirect: '/aaa' },
    { path: '/aaa', component: { render: () => h('Text', { text: 'aaa……', style: 'fill: red' }) } },
    { path: '/bbb', component: { render: () => h('Text', { text: 'bbb……', style: 'fill: red' }) } }
  ]
})
</script>

🎁 Components

Vue Runtime Pixi currently supports following components out of the box (but read Custom Components section if you need more):

<Stage />

Renders Root Container of any PIXI.Application.

• uses - pass your own Vue.Plugins instance,
• options - pass only the PIXI.Application options.

<Container /> <Sprite /> <AnimatedSprite /> <Text /> <Graphics /> <TemporaryDisplayObject /> <Mesh /> <NineSlicePlane /> <SimpleMesh /> <SimplePlane /> <SimpleRope /> <ParticleContainer /> <TilingSprite /> <BitmapText />

🎁 Custom Components

CusomtPIXIComponent API

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { CusomtPIXIComponent } from 'vue-runtime-pixi'
import { Sprite, Texture } from 'pixi.js'

// Must be before mount('#app')
CustomPIXIComponent({
  name: 'MyLogo',
  createElement(props) {
    return new Sprite(Texture.from('logo.png'))
  },
  patchProp(el, key, oldProp, newProp) {
    el[key] = newProp
  },
  onMounted(el) {
    //
  },
  onBeforeUnmount(el) {
    //
  }
})

createApp(App).mount('#app')

<template>
  <Stage>
    <MyLogo />
  </Stage>
</template>

<script setup lang="ts">
  import { Stage } from 'vue-runtime-pixi'
</script>

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

👏 Contributing

If you have any questions or requests or want to contribute, please write the issue or give me a Pull Request freely.