Building Traversy Media Hangman game in Vue 3 using the Composition API

In this video, we will be converting a hangman project created by Brad Tranvely into a Vue 3 project using the composition API. This project comes from his course called 20 web projects with vanilla javascript and he has also posted a video about converting this project into a modern react app.

We will not be changing any of the app's functionality but instead, we will be breaking it down into components and reimplementing the logic in Vue. We will be using many new techniques introduced in Vue 3 such as creating a reusable function that handles the keypress event. This function can then be used in any of your future projects. You should stick around util the end to see how to do that. This video assumes you already have a basic understanding of the Vue 3 Composition API, which if you have been following the Vue 3 series you should have, otherwise I recommend you check the Vue series.

#vue3 #hangman

⚡ RESOURCES ⚡

⭐ TIMESTAMPS ⭐
0:00 - Intro
0:59 - Project setup
1:14 - Component break down
2:02 - Hangman Figure
2:33 - Wrong Letters
2:53 - Word
3:10 - Notification
3:30 - Popup
4:19 - Game Logic
5:25 - Key down event
6:28 - Conclusion

––––––––––––––––––––––––––––––
You & I by Soyb & Amine Maxwell
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
––––––––––––––––––––––––––––––

[chankakit]

really great video!!! I'm also revamping Brad's javascript projects, for practicing my skills, and Your code is much more clean and readable, especially you present different parts by computed, compared to my code.

Amazing videos, top quality. Maybe videos are a bit too fast, hard to follow and contain few errors like status lose / lost

[emmanuelmouille]

Getting good values out of the videos but they are a bit too superficial for beginners. To improve this whilst keeping the higher pace for those who seek it, the sections in the video could be structured in such a way that the latter part of each section speaks in more details about more tricky code lines or blocks and articulating the relationships between relevant objects and design patterns.

[wijaksanapanji]

Awesome videos 👍
But when you show the command line, it's a bit hard to read, need more zoom, cheers 🎉

[RobertWildling]

Very nice, thank you very much!!! – Meanwhile 'emit' (in Popup.vue) has to be called on `context` (or maybe it way always like that, then this would be a little error):

setup(props, context) {
[...],
const reset = () => context.emit('reset')
}

and the list of words MUST be in lowercase, uppercase letters cause problems in this solution.