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.

⚡ RESOURCES ⚡
Hangman Vue Github - https://github.com/jsbroks/vue-hangman
Vue 3 Docs - https://v3.vuejs.org/

Hangman Javascript Github - https://github.com/bradtraversy/vanillawebprojects/tree/master/hangman
Hangman React Github - https://github.com/codeSTACKr/hangman-react

⭐ 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

#vue #api #javascript #programming #developer