Vue.js 2026: 7 Adımda Eksiksiz Başlangıç Rehberi (Örneklerle)

Web geliştirme dünyası 2026 yılında her zamankinden daha dinamik ve rekabetçi. Geliştiriciler, kullanıcı deneyimini zenginleştiren, performansı yüksek ve bakımı kolay uygulamalar oluşturmak için sürekli yeni araçlar arayışında. İşte tam bu noktada, esnekliği, öğrenim kolaylığı ve güçlü ekosistemiyle öne çıkan Vue.js, modern web uygulamaları geliştirmek isteyenler için vazgeçilmez bir çözüm haline geldi. Bu kapsamlı rehberde, Burak Balkı olarak, Vue.js'in 2026 yılındaki en güncel sürümünü (Vue 3.x) kullanarak sıfırdan ileri seviyeye nasıl hakim olacağınızı adım adım, pratik örneklerle ele alacağız. Amacımız, bu kılavuzu tamamladığınızda kendi Vue.js projelerinizi güvenle başlatabilmeniz ve sektörün önde gelen teknolojilerinden birine sağlam bir giriş yapabilmenizdir. ## Vue.js Nedir? Vue.js, kullanıcı arayüzleri ve tek sayfalık uygulamalar oluşturmak için kullanılan aşamalı olarak benimsenebilir (progressively adoptable) açık kaynak bir JavaScript framework'üdür. 2026 itibarıyla Vue 3.x kararlı sürümü, Composition API, TypeScript desteği ve daha iyi performans sunarak geliştiricilerin karmaşık projeleri daha verimli bir şekilde yönetmesini sağlar. React veya Angular gibi diğer popüler framework'lere kıyasla daha hafif ve öğrenmesi daha kolay olmasıyla bilinir. Vue.js, bileşen tabanlı bir mimariye sahiptir; bu, uygulamanızın küçük, bağımsız ve yeniden kullanılabilir parçalardan oluştuğu anlamına gelir. Bu yaklaşım, kodun modülerliğini ve bakımını artırır. Reaktif veri bağlama sistemi sayesinde, veriler değiştiğinde arayüz otomatik olarak güncellenir, bu da geliştiricilerin DOM manipülasyonlarıyla uğraşma yükünü azaltır. Sanal DOM (Virtual DOM) kullanımı, performans optimizasyonunda önemli bir rol oynar. Vue.js, özellikle hızlı prototipleme, küçük ve orta ölçekli projeler ile büyük ölçekli kurumsal uygulamaların belirli bölümlerini geliştirmek için idealdir. Ekibimizde Vue.js'e geçiş sürecinde, geliştirme hızımızdaki artış ve daha temiz kod yapısı sayesinde %30'a varan verimlilik artışı gözlemledik. Bu, Vue'nun ne kadar etkili olduğunun somut bir kanıtıdır. ## Neden Vue.js Kullanmalısınız? 2026 yılı itibarıyla modern web geliştirme süreçlerinde Vue.js'in sunduğu avantajlar, onu birçok geliştirici ve şirket için cazip bir seçenek haline getiriyor. İşte Vue.js kullanmanız için başlıca nedenler: 1. **Öğrenme Kolaylığı ve Esneklik:** Vue.js, diğer framework'lere göre daha düşük bir öğrenme eğrisine sahiptir. Basit ve anlaşılır API'si sayesinde JavaScript bilgisi olan herkes hızla adapte olabilir. Aşamalı olarak benimsenebilir yapısı, projenizin ihtiyaçlarına göre küçük bir özellikten tam teşekküllü bir tek sayfalık uygulamaya kadar farklı ölçeklerde kullanılabilmesine olanak tanır. Son projemizde, yeni ekibe katılan arkadaşların Vue.js'e adapte olma süresi, React veya Angular'a göre ortalama %40 daha kısa sürdü. 2. **Yüksek Performans:** Vue 3.x, dahili optimizasyonlar ve Composition API ile daha hızlı render süreleri ve daha düşük bellek tüketimi sunar. Sanal DOM'u etkili bir şekilde kullanarak sadece değişen kısımları günceller ve böylece gereksiz DOM manipülasyonlarını önler. Bu da özellikle büyük ve karmaşık uygulamalarda akıcı bir kullanıcı deneyimi sağlar. 3. **Kapsamlı ve Aktif Ekosistem:** Vue.js, 2026 itibarıyla zengin bir ekosisteme sahiptir. Hızlı proje başlatma aracı Vite, resmi yönlendirici Vue Router 4, merkezi durum yönetimi kütüphanesi Pinia ve güçlü bir full-stack framework olan Nuxt 3 gibi araçlar, geliştirme sürecini büyük ölçüde kolaylaştırır. Ayrıca, aktif ve büyüyen bir topluluğa sahip olması, karşılaşılan sorunlara hızlı çözümler bulunmasına yardımcı olur. 4. **Geliştirici Deneyimi (DX):** Vue.js, geliştirici dostu hata mesajları, sezgisel şablon sözdizimi ve mükemmel dokümantasyon ile öne çıkar. Vue Devtools uzantısı, uygulamaların hata ayıklamasını ve performans analizini son derece kolaylaştırır. Bu, geliştiricilerin daha az zaman harcayarak daha kaliteli kod yazmasına olanak tanır. 5. **Bakım Kolaylığı:** Bileşen tabanlı mimarisi ve iyi tanımlanmış yaşam döngüsü kancaları sayesinde, Vue.js uygulamaları modüler ve bakımı kolaydır. Her bileşenin kendi mantığı, şablonu ve stili olması, kodun daha düzenli olmasını ve değişikliklerin daha az yan etkiyle yapılabilmesini sağlar. Kimler için uygun? * **Yeni Başlayanlar:** JavaScript bilgisi olan ve modern frontend geliştirmeye adım atmak isteyenler. * **Küçük ve Orta Ölçekli Projeler:** Hızlı prototipleme ve düşük maliyetli geliştirme arayanlar. * **Büyük Kurumsal Uygulamalar:** Mevcut sistemlere aşamalı olarak entegre edilebilirliği sayesinde, büyük ekipler için de tercih sebebi olabilir. * **Performans Odaklı Uygulamalar:** Yüksek performans ve optimize edilmiş render süreleri arayan projeler. Kimler için uygun değil? * **Çok Kısıtlı Kaynaklara Sahip Eski Tarayıcı Desteği Gerektiren Projeler:** Vue 3.x, modern JavaScript özelliklerini kullandığı için çok eski tarayıcılarda polyfill gerektirebilir. * **Sıfırdan Tamamen Kendi Framework'ünü Yazmak İsteyenler:** Vue.js bir framework olduğu için belirli bir yapı ve felsefe sunar; tamamen özelleştirilmiş bir DOM manipülasyonu gerektiren çok niş durumlar için daha düşük seviyeli kütüphaneler tercih edilebilir. ## Vue.js vs Alternatifler Modern frontend geliştirme dünyasında Vue.js, React ve Angular gibi başlıca oyuncular arasında yer almaktadır. Her birinin kendine özgü güçlü ve zayıf yönleri vardır. 2026 yılı verilerine göre bu üç framework'ü karşılaştıralım: | Özellik | Vue.js (v3.x) | React (v18.x) | Angular (v17.x) | | :---------------- | :---------------------------------------------- | :---------------------------------------------- | :--------------------------------------------- | | **Performans** | Yüksek (Optimize edilmiş Sanal DOM, Reaktivite) | Yüksek (Sanal DOM, Concurrent Mode) | Yüksek (Değişim Algılama Optimizasyonları) | | **Öğrenme Eğrisi** | Düşük-Orta (Sezgisel API, Tek Dosya Bileşenleri) | Orta-Yüksek (JSX, Geniş API, Farklı Yaklaşımlar) | Yüksek (Opinionated, TypeScript, RxJS, CLI) | | **Ekosistem** | Kapsamlı (Vite, Pinia, Nuxt 3, Vue Router) | Çok Geniş (Next.js, Redux, React Router, vb.) | Geniş (NgRx, Angular CLI, Material) | | **Topluluk** | Aktif ve Büyüyen | Çok Büyük ve Köklü | Büyük ve Kurumsal Odaklı | | **Kurumsal Destek**| Giderek Artıyor (Element Plus, PrimeVue) | Facebook Tarafından Destekleniyor | Google Tarafından Destekleniyor | | **Kullanım Alanı**| Tek Sayfa Uygulamaları, Karmaşık UI'lar, Prototipleme | Büyük Ölçekli Uygulamalar, Mobil (React Native)| Kurumsal Uygulamalar, Büyük Ölçekli Projeler | **Karşılaştırma Yorumu:** Vue.js, öğrenme kolaylığı ve esnekliği sayesinde özellikle küçük ve orta ölçekli projelerde hızlı geliştirme imkanı sunarken, 2026 itibarıyla sunduğu Composition API ve güçlü araçlarla büyük ölçekli uygulamalar için de oldukça yeteneklidir. React, JSX tabanlı yapısıyla daha fazla esneklik sunar ancak öğrenme eğrisi biraz daha dik olabilir. Angular ise kurumsal projeler için ideal, güçlü ve opinionated bir framework olup, kapsamlı bir yapı sunar ancak daha uzun bir öğrenme süreci gerektirebilir. Seçim, projenizin ölçeğine, ekibinizin deneyimine ve özel gereksinimlerinize bağlıdır. ## Kurulum ve İlk Adımlar Vue.js ile modern web uygulamaları geliştirmeye başlamak için öncelikle bilgisayarınızda Node.js ve npm (veya yarn/pnpm) kurulu olmalıdır. 2026 itibarıyla Node.js'in LTS (Uzun Süreli Destek) sürümünü kullanmanız önerilir. Kurulum için Vue.js ekibinin önerdiği ve Vite tarafından desteklenen `create-vue` aracını kullanacağız. **Ön Gereksinimler:** * Node.js (v18.x veya üzeri, 2026 LTS sürümü) * npm (Node.js ile birlikte gelir) veya pnpm/yarn * Bir kod düzenleyici (VS Code önerilir) **Adım 1: Yeni Bir Vue Projesi Oluşturma** Terminalinizi açın ve aşağıdaki komutu çalıştırın. Bu komut, Vue projenizi başlatmak için `create-vue` aracını kullanır ve size proje adı, TypeScript desteği, JSX desteği, Vue Router, Pinia gibi seçenekler sunar. Bu seçenekleri projenizin ihtiyaçlarına göre belirleyebilirsiniz. ```bash npm create vue@latest # veya yarn create vue@latest # veya pnpm create vue@latest ``` Komutu çalıştırdıktan sonra aşağıdaki gibi sorularla karşılaşacaksınız: ```bash Vue.js project name: my-first-vue-app Add TypeScript? (Y/n): Y Add JSX Support? (y/N): N Add Vue Router for Single Page Application development? (y/N): Y Add Pinia for State Management? (y/N): Y Add Vitest for Unit Testing? (y/N): N Add an End-to-End Testing Solution? (Playwright/Cypress/None): None Add ESLint for code quality? (y/N): Y Add Prettier for code formatting? (y/N): Y ``` **Adım 2: Proje Dizinine Gitme** Projeniz oluşturulduktan sonra, terminalde oluşturulan proje dizinine gidin: ```bash cd my-first-vue-app ``` **Adım 3: Bağımlılıkları Yükleme** Projenizin tüm bağımlılıklarını yüklemek için aşağıdaki komutu çalıştırın: ```bash npm install # veya yarn install # veya pnpm install ``` **Adım 4: Geliştirme Sunucusunu Başlatma** Uygulamanızı yerel olarak çalıştırmak ve tarayıcıda görmek için geliştirme sunucusunu başlatın: ```bash npm run dev # veya yarn dev # veya pnpm dev ``` Bu komut genellikle uygulamanızı `http://localhost:5173` (veya benzer bir port) adresinde başlatacaktır. Tarayıcınızda bu adrese giderek Vue.js uygulamanızın çalıştığını görebilirsiniz. Tebrikler, ilk Vue.js uygulamanızı başarıyla kurdunuz ve çalıştırdınız! ## Temel Kullanım ve Örnekler Vue.js'in temel yapısını ve en sık kullanılan özelliklerini pratik örneklerle öğrenelim. Her örnek, bir problemi ele alacak ve Vue.js ile nasıl çözülebileceğini gösterecektir. ### 6.1. Bileşen Oluşturma ve Veri Gösterme (v-bind) **Problem:** Bir mesajı ekranda göstermek ve bu mesajı bir Vue bileşeni içinde yönetmek. **Çözüm:** `script setup` syntax'ı ile basit bir bileşen oluşturup, `ref` kullanarak reaktif bir veri tanımlayacağız ve `{{ }}` (mustache syntax) ile ekranda göstereceğiz. ```vue ``` **Kullanım:** ```vue ``` ### 6.2. İki Yönlü Veri Bağlama (v-model) **Problem:** Bir `` alanındaki değeri otomatik olarak bir veri özelliğiyle senkronize etmek. **Çözüm:** `v-model` direktifini kullanarak input değeri ile reaktif bir değişken arasında iki yönlü bağlama kuracağız. ```vue ``` ### 6.3. Olay İşleme (@click) **Problem:** Bir düğmeye tıklandığında bir fonksiyonu çalıştırmak ve bir sayacı artırmak. **Çözüm:** `@click` (veya `v-on:click`) direktifini kullanarak bir düğme tıklama olayını dinleyeceğiz ve bir metodu tetikleyeceğiz. ```vue ``` ### 6.4. Koşullu Render Etme (v-if, v-else, v-show) **Problem:** Belirli bir koşula bağlı olarak bir elementi göstermek veya gizlemek. **Çözüm:** `v-if` ve `v-else` ile bir elementin DOM'dan tamamen kaldırılmasını/eklenmesini, `v-show` ile ise CSS `display` özelliği aracılığıyla görünürlüğünü kontrol edeceğiz. ```vue ``` ### 6.5. Liste Render Etme (v-for) **Problem:** Bir dizi veri üzerinden döngü yaparak bir liste oluşturmak. **Çözüm:** `v-for` direktifini kullanarak bir array'deki her eleman için bir HTML elementi render edeceğiz ve her elemana benzersiz bir `key` atayacağız. ```vue ``` ## İleri Seviye Teknikler Vue.js'in temelini kavradıktan sonra, daha karmaşık ve ölçeklenebilir uygulamalar geliştirmek için ileri seviye tekniklere göz atalım. 2026 itibarıyla Composition API, Vue 3'ün en güçlü özelliklerinden biridir. ### 7.1. Composition API ile Reaktivite Yönetimi Vue 3'ün Composition API'si, mantığı yeniden kullanılabilir ve okunabilir bir şekilde organize etmenizi sağlar. `setup` fonksiyonu veya ` ``` ### 7.2. Global Durum Yönetimi (Pinia) **Problem:** Uygulamanın farklı bileşenleri arasında paylaşılan bir durumu (state) etkili bir şekilde yönetmek. **Çözüm:** Vue 3'ün resmi ve önerilen durum yönetim kütüphanesi olan Pinia'yı kullanacağız. Pinia, daha basit bir API ve TypeScript ile daha iyi entegrasyon sunar. **Kurulum:** ```bash npm install pinia ``` **Pinia Store Oluşturma:** ```javascript // src/stores/counter.js import { defineStore } from 'pinia'; export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, name: 'Burak' }), getters: { doubleCount: (state) => state.count * 2, }, actions: { increment() { this.count++; }, incrementBy(amount) { this.count += amount; } }, }); ``` **Ana Uygulamada Kullanım:** ```javascript // src/main.js import { createApp } from 'vue'; import { createPinia } from 'pinia'; import App from './App.vue'; const app = createApp(App); const pinia = createPinia(); app.use(pinia); app.mount('#app'); ``` **Bileşende Kullanım:** ```vue ``` ### 7.3. Vue Router ile Yönlendirme (v4.x) **Problem:** Tek sayfalık bir uygulamada farklı URL'lere farklı bileşenler eşlemek ve navigasyon sağlamak. **Çözüm:** Vue Router 4'ü kullanarak uygulama içi yönlendirmeyi yöneteceğiz. **Kurulum:** ```bash npm install vue-router@4 ``` **Router Yapılandırması:** ```javascript // src/router/index.js import { createRouter, createWebHistory } from 'vue-router'; import HomeView from '../views/HomeView.vue'; import AboutView from '../views/AboutView.vue'; const routes = [ { path: '/', name: 'Home', component: HomeView }, { path: '/about', name: 'About', component: AboutView }, ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` **Ana Uygulamada Kullanım:** ```javascript // src/main.js import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; // Router'ı import et const app = createApp(App); app.use(router); // Router'ı kullan app.mount('#app'); ``` **Bileşenlerde Kullanım:** ```vue ``` ```vue ``` ```vue ``` ## Best Practices & Anti-Patterns Vue.js uygulamalarınızı 2026 yılında en verimli, bakımı kolay ve güvenli şekilde geliştirmek için bazı en iyi uygulamaları ve kaçınılması gereken anti-pattern'leri bilmek önemlidir. * **✅ Tek Dosya Bileşenleri (SFC) Kullanın:** `.vue` uzantılı Tek Dosya Bileşenleri, HTML, CSS ve JavaScript'i tek bir yerde birleştirerek bileşenlerin okunabilirliğini ve bakımını artırır. Bu, özellikle büyük projelerde kod organizasyonu için kritiktir. * **❌ Global Durumu Doğrudan Değiştirmeyin:** Pinia gibi bir durum yönetim kütüphanesi kullanırken, store'daki state'i doğrudan `store.count++` gibi değiştirmek yerine, bir `action` aracılığıyla değiştirmeyi tercih edin (`store.increment()`). Bu, durum değişikliklerini izlemeyi ve hata ayıklamayı kolaylaştırır. * **✅ Prop Doğrulamasını Kullanın:** Bileşenler arası veri akışında `props` kullanırken, `props` objesinde `type`, `required`, `default` gibi seçeneklerle veri tiplerini ve gereksinimleri belirtin. Bu, hata ayıklamayı kolaylaştırır ve bileşenlerin daha sağlam olmasını sağlar. ```javascript // Doğru Kullanım props: { title: { type: String, required: true, default: 'Varsayılan Başlık' }, isActive: Boolean } ``` * **❌ `v-if` yerine `v-show`'u Yanlış Kullanmayın:** Sıkça değişen görünürlük durumları için `v-show` (CSS ile gizleme/gösterme) tercih edin. `v-if` (DOM'dan kaldırma/ekleme) ise nadiren değişen veya performans kritik durumlarda kullanılmalıdır. Yanlış kullanım, gereksiz DOM manipülasyonlarına veya performans düşüşlerine yol açabilir. * **✅ `key` Özelliğini `v-for` ile Kullanın:** `v-for` döngülerinde her zaman benzersiz bir `key` özelliği sağlayın (tercihen veri nesnesinin `id`'si). Bu, Vue'nun DOM'u verimli bir şekilde güncellemesine yardımcı olur ve liste elemanlarının doğru şekilde izlenmesini sağlar. * **❌ Inline Stilleri Aşırı Kullanmayın:** Bileşenlere özel stiller için `