Building a Card Matching Game from Start to Finish Using Vue 3's Composition API in Under 2 Hours

In this episode of Building with Ben, we'll be creating a card matching game from scratch using Vue.js 3 and the Composition API.

Demo: https://peek-a-vue.netlify.app/
GitHub Repo: https://github.com/bencodezen/peek-a-vue

🏷 Bookmarks
0:00 - Intro
0:25 - Getting Setup
3:15 - Creating the Game Board
9:15 - Defining the Card Component
20:26 - Tracking User Selection
33:05 - Track User Progress and Win Condition
37:30 - Shuffle the Cards
40:21 - Ability to Restart the Game
43:49 - Generate Deck with Matching Pairs
46:40 - Allow User to See Incorrect Match Before Flipping
48:58 - User Cannot Register Same Card
51:30 - Add Halloween Styles
01:06:02 - Add Card Flipping Animation
01:10:50 - Add Shuffle Animation
01:16:22 - Add Confetti Animation
01:21:35 - Additional Home Page Styles
01:28:44 - Deploying the Game
01:31:18 - Outro

🔗 Links:
Twitter - Twitter: bencodezen
GitHub - https://www.github.com/bencodezen
Website - https://www.bencodezen.io

• #science_technology
• #vue_js
• #vue_3
• #vue_project