Game creator #3 - Loading a file in Vue 3

While my research how Vue 3 works, I found through twitter the beta version for Vue 3 documentation: What really pleased me was the fact that it’s very similar to Vue 2! That’s completely different from what Angular did when they released Angular 2. Super cool!

I could stick to what I know about Vue and use the standard way of creating components

export default { name: “ComponentName”, methods: { fileChanged(file) { /* … */ } } }

But I want to use the hottest feature: Composition API!

My way to learn stuffs is:

  1. read the basics to have some understanding on how to use it and how it works
  2. use it

So, based on that, I read the documentation and tried some stuffs. In the end, to load a file in Vue 3 using Composition API, we will need that:

<template> <span>Filename selected: {{ filename }}</span> <input type="“file”" accept="image/png” @change=" selectedImage($[0])” /> </template> <script> import { ref } from "vue"; export default { setup() { const filename = ref(""); function selectedImage(file) { filename.value =; } return { filename, selectedImage }; } }; </script>

All right! This doesn’t look bad, right?! A few lines of code and it works!

Next step: let’s integrate Phaser into Vue 3!