Pixi - Vue

[Jenson]

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.

Thanks?

[ivan.popelyshev]

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?

[Jenson]

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.

https://monosnap.com/file/aqwbvSpdFejmG70ffwKkhPnuk9mlgO

And this is the project code.

https://github.com/truedandyman0617/my-vue-pixi

 

When you run the command 

Quote

npm run lint

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

https://monosnap.com/file/1B0TkKWv8tuPP97tHot0s4vrUIcBwL

 

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 December 6, 2019 by Jenson

[ivan.popelyshev]

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.

[Jenson]

Thanks for your always kindness reply.