Building a cards match game with vue

Written by: Marlon Colca
Posted on 18 Sep 2025 - 16 days ago
typescript nodejs vue games

By the time we are done, you will have a fully playable memory game built with Vue 3, TypeScript, and Vite

Module 1 · Welcome to Cards Match! 🎉

Hi there! I am thrilled to guide you through this course. By the time we are done, you will have a fully playable memory game built with Vue 3, TypeScript, and Vite.

What we will cover

• 👀 Explore the finished experience so you know the goal
• 🧠 Understand the game mechanics at a high level before touching code
• 🗺️ Preview the roadmap for the rest of the modules

Quick win: run the game

Fire up your local copy and see the magic in action:

npm install
npm run dev

Then visit http://localhost:5173.

Pay attention to these moments:

• ⏱️ A timed preview flips all cards at the start of each round.
• ⚡ Matches award 100 points plus up to a 1000-point speed bonus.
• 🔄 You can switch difficulty or image source (emoji vs. Giphy) instantly.

Roadmap at a glance

1. Set up the environment like a pro.
2. Master the core game state with the useGame composable.
3. Craft a dynamic UI with reusable Vue components.
4. Connect image sources and persist settings locally.
5. Wrap up with persistence, polish, and ideas for extensions.

Take a deep breath, open your editor, and let us build something fun together! 🚀

🔜 Coming up next

Environment Setup

Let us make sure your tooling is ready so you can iterate quickly without surprises.

19 Sep 2025 - 15 days ago