{"id":17045926,"url":"https://github.com/jsbroks/vue-hangman","last_synced_at":"2025-04-30T12:21:37.046Z","repository":{"id":54516224,"uuid":"296964395","full_name":"jsbroks/vue-hangman","owner":"jsbroks","description":"Recreated Tranversy Media hangman game in Vue 3","archived":false,"fork":false,"pushed_at":"2021-02-13T21:34:20.000Z","size":270,"stargazers_count":2,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-29T19:46:14.996Z","etag":null,"topics":["api","hangman-game","hangman-in-vue","tutorial","vue-composition-api","vue3","youtube"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsbroks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-19T22:52:40.000Z","updated_at":"2024-04-25T14:49:29.000Z","dependencies_parsed_at":"2022-08-13T18:20:53.738Z","dependency_job_id":null,"html_url":"https://github.com/jsbroks/vue-hangman","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsbroks%2Fvue-hangman","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsbroks%2Fvue-hangman/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsbroks%2Fvue-hangman/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsbroks%2Fvue-hangman/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsbroks","download_url":"https://codeload.github.com/jsbroks/vue-hangman/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228923866,"owners_count":17992590,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","hangman-game","hangman-in-vue","tutorial","vue-composition-api","vue3","youtube"],"created_at":"2024-10-14T09:42:46.640Z","updated_at":"2024-12-09T16:31:54.733Z","avatar_url":"https://github.com/jsbroks.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  Vue 3 Hangman Game\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003eBuilding Traversy Media Hangman game in Vue 3 using the Composition API.\u003c/h4\u003e\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://www.youtube.com/watch?v=8zXvmmn9qVo\" target=\"_blank\"\u003e\u003cimg src=\"https://img.youtube.com/vi/8zXvmmn9qVo/maxresdefault.jpg\" \nalt=\"Tutorial creating hangman project in Vue 3\" width=\"600\" /\u003e\u003c/a\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003ci\u003eCheckout the tutorial for this repo.\u003c/i\u003e\u003c/p\u003e\n\n\u003cbr /\u003e\n\n## Summary\n\nIn this video, we will be converting a hangman project created by Brad Traversy\ninto a Vue 3 project using the composition API. This project comes from his\ncourse called 20 web projects with vanilla javascript and he has also posted a\nvideo about converting this project into a modern react app.\n\nWe will not be changing any of the app's functionality but instead, we will be\nbreaking it down into components and re-implementing the logic in Vue. We will be\nusing many new techniques introduced in Vue 3 such as creating a reusable\nfunction that handles the keypress event. This function can then be used in any\nof your future projects. You should stick around util the end to see how to do\nthat. This video assumes you already have a basic understanding of the Vue 3\nComposition API, which if you have been following the Vue 3 series you should\nhave, otherwise I recommend you check the vue series.\n\n## Resources\n\n- [Hangman Javascript Github](https://github.com/bradtraversy/vanillawebprojects/tree/master/hangman)\n- [Hangman React Github](https://github.com/codeSTACKr/hangman-react)\n- [Hangman React Tutorial](https://www.youtube.com/watch?v=jj0W8tYX_q8)\n- [20 Web projects course](https://vanillawebprojects.com)\n- [Traversy Media](https://www.traversymedia.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsbroks%2Fvue-hangman","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsbroks%2Fvue-hangman","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsbroks%2Fvue-hangman/lists"}