Nuxt.js: Problem with pixi.js and nuxt

Created on 20 Dec 2017  路  4Comments  路  Source: nuxt/nuxt.js

Hi,
I make a simple vue component into components folder of nuxt that use pixi js for some graphics effect.
I used this component into default.vue layout and for now all ok.
But now when i Split code in some simple es6 class that extends pixi.js class when i use One of this into my vue component receive Cannot read property middlewere of undefined, i think Is a sometjing similari to ssr problem becouse pixi use dom, but my component Is wrapper by a nossr tag and into my nuxt.config.js Is set ssr false for pixi.js module

Witch Is my mistake?

This question is available on Nuxt.js community (#c2104)

Most helpful comment

Thanks @mcpll I applied your way and its working !

nuxt.config.js

  plugins: [
    {
      src: '~/plugins/pixi',
      ssr: false
    }
  ],

pixi.js inside plugin folder

import * as PIXI from 'pixi.js'

export default PIXI

And after you can use PIXI anywhere with the annotation
/* global PIXI */

Example with the annotation
I take the example for official doc
bunnySexy.js

/* global PIXI */

const texture = PIXI.Texture.fromImage('http://pixijs.io/examples/required/assets/bunny.png')
const bunny = new PIXI.Sprite(texture)
// do something with the bunny

https://github.com/CMarzin/Pixi-Nuxt/

Edit: write a little example
Edit 2 : check the repo

All 4 comments

this is my github repo
https://github.com/mcpll/mononuxt

Try to execute your init function after checking for ssr if (process.client) { this.init() }

Thanks @mcpll I applied your way and its working !

nuxt.config.js

  plugins: [
    {
      src: '~/plugins/pixi',
      ssr: false
    }
  ],

pixi.js inside plugin folder

import * as PIXI from 'pixi.js'

export default PIXI

And after you can use PIXI anywhere with the annotation
/* global PIXI */

Example with the annotation
I take the example for official doc
bunnySexy.js

/* global PIXI */

const texture = PIXI.Texture.fromImage('http://pixijs.io/examples/required/assets/bunny.png')
const bunny = new PIXI.Sprite(texture)
// do something with the bunny

https://github.com/CMarzin/Pixi-Nuxt/

Edit: write a little example
Edit 2 : check the repo

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

danieloprado picture danieloprado  路  3Comments

pehbehbeh picture pehbehbeh  路  3Comments

vadimsg picture vadimsg  路  3Comments

mattdharmon picture mattdharmon  路  3Comments

vadimsg picture vadimsg  路  3Comments