Vue + Phaser 3 Webpack boilerplate

I created a Webpack template that sets up a Vue project with Phaser 3 integration. It’s really minimal but can get people started.

Feel free to hit me with questions or suggestions.

https://github.com/Sun0fABeach/vue-phaser3

Cheers

1 Like

Hey I was wondering if loading html using this.load.html then adding it to dom element works for you. Ive been using your boilerplate and I’m trying to load a generic html to display it and I’m having problems. I would appreciate any help that I can get.

I’m trying to replicate https://labs.phaser.io/view.html?src=src\game%20objects\dom%20element\form%20input.js on your boiler plate and I’m having difficulties.

Does the the boiler plate support the latest DOM + HTML? I checked the package.json and it’s 3.17… https://rexrainbow.github.io/phaser3-rex-notes/docs/site/domelement/

If you are providing the path to your HTML file as a string literal like in the Phaser example, it won’t work. When using Webpack, all assets have to be imported as modules. Like so:

import loginForm from 'path/to/html'

// in your preload method
this.load.html('nameform', loginForm);

Is there a html-loader I need to install with this boilerplate? When I try to import as a module it gives an error:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <!-- <html lang="en">
| <head>
|     <meta charset="UTF-8">

I tried using https://github.com/jantimon/html-webpack-plugin but I’m not entirely sure if this is the approach or how to configure the vue.config.js in the boilerplate to support html

thanks in advance

Right, you need to install the html-loader.

npm install --save-dev html-loader

You will also have to setup the loader by modifying the builtin Webpack config. So in your vue.config.js, add the following to the exported object:

  configureWebpack: {
    module: {
      rules: [{
        test: /\.html$/,
        use: [ {
          loader: 'html-loader',
          options: {
            minimize: true
          }
        }],
      }]
    }
  }

Now you should be good to go!

Hey, so I forked your repo and tried loading it and the html-loader works but it has issues when I try to add dom it shows the black screen where it should exist but doesn’t add HTML to DOM element. I checked that the phaser version is 3.17. I’m wondering if you have any idea why that is. It’s definitely import/loading HTML and it doesn’t cause any errors. I wonder if it has anything to do with phaser or the boilerplate. I tried running the exact code but using a CDN(latest version of phaser) and a single file format where its not modularized on a server on XAMPP and it loads but it doesn’t load currently with the boilerplate.

Supposedly phaser 3.17 supports DOM https://phaser.io/news/2019/05/phaser-3170-released

and I checked the package.json and its the most up to date version

The repo I have testing html: https://github.com/TseIvan/vue-phaser3

Thanks for all the help.

Looks like using this Phaser DOM feature just doesn’t play well with the Webpack config that comes with projects scaffolded by the Vue-CLI. Which is kind of understandable, because you are supposed to build your HTML using Vue templates. Not much I can do about that, sorry. So it seems like you have to choose between having a Vue UI or inserting HTML directly into Phaser. No mixing allowed, unfortunately.