Sign in to follow this  
Jenson

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.

ThanksūüėČ

Share this post


Link to post
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?

Share this post


Link to post
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.

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 by Jenson

Share this post


Link to post
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.

Share this post


Link to post
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.

Guest
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.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.