Jump to content

Pixi - Vue


Recommended Posts

Hi everyone,

I wanna use vue-pixi package on my vuejs project, But this package doesnt work properly.

Which version of vuejs do I have to use for this package?

The package is installed but the Import command doesnt work. vue-pixi is not recognized.


Link to comment
Share on other sites

Lets see... https://github.com/Granipouss/vue-pixi

Currently it is more a proof of concept that an actual library but it will get there eventually

I looked up pixi-related code there and i dont see anything that can be wrong with latest 5.2.0

Why exactly do you need some kind of library to use pixi with vuejs? Do you need help just setting up pixi app inside, or do you need to specify pixi components and filters with vue components?

Link to comment
Share on other sites

Hi ivan,

I am going to build up a single page with vuejs and this page contains slider etc.

And I have to add html5 animation with pixi in each slider page.

So I tried to install vue-pixi to my vuejs project but I got failed.

The installation of package has successfully done without error.

But when I add it to plugin, the path to vue-pixi is not recognized and I cannot use it in my component finally.


The envirenment is as following:

- OS: macOS Mojave 10.14.6

- NPM version: 6.13.2

- Vue-cli version: 4.1.1


It's the screenshot for the error when I run on the browser.


And this is the project code.



When you run the command 


npm run lint

then you can see the errors what I am explaining now.



My purpose it to run this project without error in browser so I can add pixi codes for html5 animation.


Thank you very much.

Edited by Jenson
Link to comment
Share on other sites

I cant help you with webpack, I'm webpack hater :) 

I can only say that its possible and many people added pixi application to vue and react apps without any plugins. Just make a component that contains canvas and don't forget to destroy() your renderer every time you switch pages or something like that. Or you can re-use existing canvas many times and start/stop ticker when needed. 

This is required knowledge when you use pixi with any other framework: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop

Your options here are:

1. wait for someone to help setting up your project

2. learn how to set up custom pixi application and then do it yourself.

You can also search this subforum for vue and react stuff, there were a number of threads like that.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...