Vue 3 Crash Course: From Figma to Real App
In this video, I build a real-world project from scratch using Vue 3 based on a Figma design from Frontend Mentor.
Through a hands-on approach, I demonstrate how to use Vue's core features like slots, reactivity, scoped styles, global state management with Pinia, VueUse composables, and animated transitions with TransitionGroup.
No external UI libraries are used — we bring a professional design to life using only Vue and modern web technologies.
🎯 Who is this for?
• Beginners learning Vue 3
• Developers who want to master component architecture and slots
• Anyone interested in global state with Pinia and basic animations
• Frontend Mentor fans looking to build real projects
💻 Technologies Used
• Vue 3 (Composition API)
• TypeScript
• Pinia
• VueUse
• TransitionGroup
• HTML5 & CSS3
📌 Topics Covered
• Using slots for flexible components
• Reactive state & computed properties
• Managing global state with Pinia
• VueUse utilities for clean logic
• Animating with TransitionGroup
• Pixel-perfect implementation of a Figma design
🧩 Project Link:
🔗 https://www.frontendmentor.io/challen...
⏱ Timestamps:
00:00 Intro
02:25 Project Overview
03:09 Figma Overview
04:01 Project Setup
04:53 Folder Structure
08:17 Design System & CSS Variables
15:40 App Structure & Header Section
24:42 Main Section
47:50 Reactivity & Pinia
01:10:00 Light/Dark Mode with VueUse
01:11:41 Adding Animations with TransitionGroup
01:14:37 Outro
📩 Contact
📧 [email protected]
🌐 GitHub
📸 Instagram
🎵 TikTok
💼 LinkedIn
🧠 Tags
#vue #vue3 #frontend #slot #pinia #vueuse #compositionapi #frontendmentor #figmatocode #webdevelopment #vuecrashcourse #transitiongroup #vueforbeginners