phaser with nuxt

[tien20tm]

phaser game not show in vue component

index.vue

<template>
    <div>
        <Game></Game>
    </div>
</template>
<script>
export default {
    data() {
        return {}
    },
}
</script>

<style></style>

game.vue

<template>
    <div><div id="game"></div></div>
</template>
<script lang="ts">
import Phaser from 'phaser'
import config from '~/src/config'
import Game from '~/src/scenes/Game'
new Phaser.Game(
    Object.assign(config, {
        scene: [Game],
    })
)
</script>
<script>
export default {
    data() {
        return {}
    },
}
</script>

config.ts

import Phaser from 'phaser'

export default {
    type: Phaser.AUTO,
    parent: 'game',
    backgroundColor: '#33A5E7',
    scale: {
        width: 800,
        height: 600,
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
    },
}

Game.ts

import Phaser from 'phaser'

export default class Demo extends Phaser.Scene {
    constructor() {
        super('GameScene')
    }
    preload() {
        this.load.image('logo', '/assets/phaser3-logo.png')
    }
    create() {
        const logo = this.add.image(400, 70, 'logo')
        this.tweens.add({
            targets: logo,
            y: 350,
            duration: 1500,
            ease: 'Sine.inOut',
            yoyo: true,
            repeat: -1,
        })
    }
}