Jump to content

Does PIXI work with Vue.js ?


Recommended Posts

Hi !

I'm a beginner with both pixi.js and vue.js and I can't manage to import pixi.js in my components. I tried different ways : 

- Import pixi.js in index.html via the CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.min.js"></script>

- Import pixi.js directly in my component (like in the example, it's working perfectly with TweenMax)

import PIXI from 'pixi.js'
import TweenMax from 'gsap'

export default {
  name: 'home',
  mounted () {
    console.log('Mounted home, ready to PIXI')

The problem is that in my component, 'PIXI' is always undefined. Do you know if it's possible or if it's just me missing something.

Thank you in advance.

Link to comment
Share on other sites

Unfortunately Pixi still doesn't play perfectly with a module system, however, you'll be able to get it to do what you want:

Pixi 4.3.2 no longer exports a PIXI master object, instead you can grab what you need from the exports list, i.e.

import {Container} from 'pixi.js'

var stage = new Container()

However, this all looks great but under the hood things are not so great. Pixi will still stamp out a global PIXI object and it'll include its polyfills whether you need them or not, if you're also including those polyfills (which is very easy to do if you're using Babel for your project) then you'll have them twice, possibly with conflicts in some part of your code, although I suspect there is a method to generate a pixi build without polyfills. I can only assume that some parts of the Pixi codebase still require the PIXI object to be global, hence why it sticks it there.

Take a look at node_modules/pixi.js/lib/index.js to make more sense out of it.

The reason your code does not work, even when PIXI is global, is because `import PIXI from 'pixi.js'` gets turned into a local variable PIXI which references nothing, if you're transpiling to commonJS then it'll get turned into `var PIXI = require('pixi.js')` (usually) and the pixi.js file that gets referenced has no default export, or no module.exports, so PIXI becomes undefined and as its now a local variable it'll take precedence over global.PIXI, which would be window.PIXI when it hits the browser. Many linters will prefer to prohibit you from using global objects directly and prefer you specify them with window.PIXI, which, in your case, would work with either the script include or the PIXI include.

You can just include `import 'pixi.js'` in an entry file (or even into a script that gets run in the <head>, or use the cdn script include) and use the PIXI global or continue to specify each bit of pixi you want, seeing as how PIXI will pollute the global it doesn't really matter, a matter of preference for you.

Link to comment
Share on other sites

Thanks all for your answers. I see now that I didn't understand well the context and import scope of Pixi.js. Moreover I won't need all the parts of the library so, importing only some exports (like in React for example) is gonna be cleaner for what I want to do.

Thanks again ! 

Link to comment
Share on other sites

  • 2 years later...

I'm using Pixi with Vue, and even people said that we just need to import what we need using `import`, but when inspecting my built file, it still import all the library.

I tried create only the application by using `import { Application }  from 'pixi.js'`. After building files, it still import the whole PIXI Library, the same thing happen when I use ` import {Container}` or others components. I tried with React, and it's same. Then I realize that it just supports us to use `import` and the whole Library will be accompanied with every module you use. :) (try take a look at your app.js file after built)


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