While my research how Vue 3 works, I found through twitter the beta version for Vue 3 documentation: https://v3.vuejs.org/ 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:
- read the basics to have some understanding on how to use it and how it works
- 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($event.target.files[0])”
/>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
const filename = ref("");
function selectedImage(file) {
filename.value = file.name;
}
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!