Скачать или смотреть Vue 3 Crash Course: Figma'dan Gerçek Uygulamaya

Vue JS Dersleri 2025! Bu videoda, Frontend Mentor'daki bir Figma tasarımını sıfırdan Vue 3 kullanarak öğretici bir şekilde kodluyorum.

Gerçek bir projeyle, slot yapısı, reaktif veriler, scoped styling, global state yönetimi (Pinia), VueUse composable'ları ve TransitionGroup gibi modern Vue tekniklerini adım adım öğretiyorum.

Bu video, Vue öğrenmek isteyenler için uygulamalı bir rehberdir. Ekstra hiçbir UI kütüphanesi kullanmadan yalnızca Vue ekosistemindeki güçlü özelliklerle, profesyonel bir tasarımı birlikte hayata geçiriyoruz.

🎯 Hedef Kitle
• Vue 3 öğrenmeye başlayanlar
• Slot ve component mimarisine hakim olmak isteyenler
• State yönetimi (Pinia) ve animasyonlara giriş yapmak isteyenler
• Frontend Mentor projelerini uygulamalı şekilde geliştirmek isteyenler

💻 Kullanılan Teknolojiler
• Vue 3 (Composition API)
• TypeScript
• Pinia
• VueUse
• TransitionGroup
• HTML5, CSS3

📌 Konular:
• Slot kullanımı ile esnek component yapıları
• Reaktif state ve computed property yapısı
• Pinia ile global state yönetimi
• VueUse ile yardımcı fonksiyonlar
• TransitionGroup ile geçişli animasyonlar
• Frontend Mentor figma tasarımı ile birebir uygulama

📌 Proje Linki:
🔗 https://www.frontendmentor.io/challen...

⏱ TimeStamps:
00:00 Giriş
02:25 Project Overview
03:09 Figma Overview
04:01 Project Setup
04:53 Project Structue
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 Mide w/VueUse
01:11:41 Adding Transition w/TransitionGroup
01:14:37 Outro

📩 İletişim: [email protected]
🌐 GitHub: https://github.com/gumrahsindar
📸 Instagram:   / gumrah.codes  
🎵 TikTok:   / gumrahsindar  
💼 LinkedIn:   / gumrahsindar  
🧠 Etiketler (Tags)

#vue #vuejs #frontend #slot #pinia #vueuse #compositionapi #frontendmentor #uygulamalıeğitim #figmatocode #transitiongroup #vueeğitimi #webdevelopment