Pixi'VN - Vue UI

How to integrate Pixi’VN with Vue, including setup, templates, and UI examples. Create a Vue visual novel or 2D game.

What is Vue? Vue is a progressive framework for building user interfaces. It is designed to be incrementally adoptable and can easily scale between a library and a full-featured framework.

You can learn more about Vue on the Vue website.

How to add Pixi’VN to a Vue application

Vue template

I am looking for someone to help me develop Vue templates. Are you available to help?

If you are interested or available to help, feel free to write in the chat below!

First, you need a Vue application and to install pixi-vn. Is recommended to use Vite to create a new Vue application.

次に、以下のファイルの内容をコード例に置き換えます：

import { canvas, Container, Game, RotateTicker, showImage } from '@drincs/pixi-vn'
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app') 
const body = document.body; 
if (!body) { 
  throw new Error("body element not found"); 
} 
Game.init(body, { 
    height: 1080, 
    width: 1920, 
    backgroundColor: "#303030", 
  }) 
  .then(() => { 
    // Pixi.JS UI Layer
    canvas.addLayer("ui", new Container()); 
    showImage( 
      "juliette", 
      "https://firebasestorage.googleapis.com/v0/b/pixi-vn.appspot.com/o/public%2Fcharacters%2Fjuliette-icon.webp?alt=media&token=cbcdd613-12e4-48b5-b7b3-16443b4e125e", 
      { xAlign: 0.9, yAlign: 0.1, anchor: 0.5 } 
    ); 
    canvas.addTicker("juliette", new RotateTicker({ speed: 1 })); 
    // Vue setup
    const app = document.getElementById("app"); 
    if (!app) { 
      throw new Error("app element not found"); 
    } 
    const htmlLayer = canvas.addHtmlLayer("ui", app, { 
      position: "absolute", 
      pointerEvents: "none"
    }); 
    if (!htmlLayer) { 
      throw new Error("htmlLayer not found"); 
    } 
    createApp(App).mount(htmlLayer) 
  } 
)

Vue UI

How to add Pixi’VN to a Vue application

On this page