How to correctly import Phaser 3 to Vue component?

Phaser 3
1

I am using NPM for installing packages, so I run npm install phaser and it has completed succesfull.
Now I’m trying add Phaser to my Vue Component in according to this tutorial:

import * as Phaser from 'phaser'; 
export default {
    data: () => ({
        config : {
            type: Phaser.Phaser.AUTO,
            width: 800,
            height: 600,
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { y: 200 }
                }
            },
            scene: {
                preload: this.preload,
                create: this.create
            }
        },
        game : new Phaser.Phaser.Game(this.config),
    }),
    methods:{
        preload (){
            this.load.setBaseURL('http://labs.phaser.io');
            this.load.image('sky', 'assets/skies/space3.png');
            this.load.image('logo', 'assets/sprites/phaser3-logo.png');
            this.load.image('red', 'assets/particles/red.png');
        },
        create (){
            this.add.image(400, 300, 'sky');
            var particles = this.add.particles('red');
            var emitter = particles.createEmitter({
                speed: 100,
                scale: { start: 1, end: 0 },
                blendMode: 'ADD'
            });
            var logo = this.physics.add.image(400, 100, 'logo');
            logo.setVelocity(100, 200);
            logo.setBounce(1, 1);
            logo.setCollideWorldBounds(true);
            emitter.startFollow(logo);
        },
    },

And I get an error:

Error in data(): “TypeError: Cannot read property ‘AUTO’ of undefined”

How to solve this problem?

2

You may try changing type to Phaser.AUTO from Phaser.Phaser.AUTO

3

Changing type didn’t work. If someone else trying to import Phaser 3 to Vue component, look at this repo