# How to correctly import Phaser 3 to Vue component?

**URL:** https://phaser.discourse.group/t/how-to-correctly-import-phaser-3-to-vue-component/4975
**Category:** Phaser 3
**Created:** [January 23, 2020, 5:24pm UTC](https://phaser.discourse.group/t/how-to-correctly-import-phaser-3-to-vue-component/4975 "2020-01-23T17:24:45Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Aleasper](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@Aleasper](https://phaser.discourse.group/u/Aleasper)
#### Post date: [January 23, 2020, 5:24pm UTC](https://phaser.discourse.group/t/how-to-correctly-import-phaser-3-to-vue-component/4975/1 "2020-01-23T17:24:45Z")

</div>

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](https://phaser.io/tutorials/getting-started-phaser3/part5):

```
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?

---

<div class="post-metadata">

### Author: ![Nemesis](https://avatars.discourse-cdn.com/v4/letter/n/96bed5/32.png) [@Nemesis](https://phaser.discourse.group/u/Nemesis)
#### Post date: [January 24, 2020, 5:51am UTC](https://phaser.discourse.group/t/how-to-correctly-import-phaser-3-to-vue-component/4975/2 "2020-01-24T05:51:03Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Aleasper](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@Aleasper](https://phaser.discourse.group/u/Aleasper)
#### Post date: [January 25, 2020, 12:21pm UTC](https://phaser.discourse.group/t/how-to-correctly-import-phaser-3-to-vue-component/4975/3 "2020-01-25T12:21:16Z")

</div>

Changing type didn’t work. If someone else trying to import Phaser 3 to Vue component, look at [this repo](https://github.com/Sun0fABeach/vue-phaser3)