Nuxt Phaser
This plugin empowers your game using Vue/Nuxt.
Why Vue and Nuxt?
With Vue/Nuxt you can make web development simple and powerful, using these features:
- Build
- Tests
- Plugins (like Workbox, GTM, Adsense, ...)
Setup
- Add
nuxtjs-phaser
dependency using yarn or npm to your project
npm install nuxtjs-phaser --save
yarn add nuxtjs-phaser
- Add
nuxtjs-phaser
toplugins
section ofnuxt.config.js
plugins: [
{ src: 'node_modules/nuxtjs-phaser', mode: 'client' }
],
Usage
Loading phaser manually
You can load phaser on your component, where and how you want:
const myGame = new Phaser.Game()
this.$phaser.initialize(myGame)
Loading phaser by component
You can load phaser using vue component:
import PhaserGame from 'nuxtjs-phaser/phaserGame.vue'
<div>
<PhaserGame :createGame="createGame" />
<div>
Phaser Events
Phaser uses has own Event Emitter, this plugin allows you to emit and listen to events between Vue (Nuxt) and Phaser.
// listen events
this.$phaser.eventEmitter.addListener('jump', ({ superJump = false }) => {
myPlayer.jump(superJump)
}, this)
// emit events with args
this.$phaser.eventEmitter.emit('jump', { superJump: false })
Built-in Events
- pause
Pause a scene.
// emit events with args
this.$phaser.eventEmitter.emit('pause', 'level')
- resume
Resume a scene.
// emit events with args
this.$phaser.eventEmitter.emit('resume', 'level')
- restart
Restart a scene.
// emit events with args
this.$phaser.eventEmitter.emit('restart', 'default')
Project sample
Check out this project sample.