Vue.js Nedir, Ne İşe Yarar?

Vue.js, web uygulamalarında kullanıcı arayüzleri oluşturmak için geliştirilen JavaScript tabanlı bir framework'tür. Bileşen temelli yapısı sayesinde sayfanın farklı bölümleri bağımsız ve tekrar kullanılabilir parçalar hâlinde geliştirilebilir.

Örneğin bir e-ticaret sitesindeki ürün kartı, arama alanı, alışveriş sepeti ve filtreleme paneli ayrı Vue bileşenleri olarak tasarlanabilir.

Vue.js ile Neler Yapılabilir?

• Dinamik web siteleri
• Yönetim panelleri
• E-ticaret arayüzleri
• Görev ve proje takip uygulamaları
• Form ve başvuru sistemleri
• API üzerinden veri gösteren uygulamalar
• Tek sayfa uygulamaları (SPA)
• İçerik ve veri yönetimi arayüzleri

Vue.js, kullanıcı arayüzü geliştirmeye odaklanır. Sunucu tarafındaki veri işleme ve veritabanı işlemleri için gerektiğinde Laravel, Node.js veya başka bir backend teknolojisiyle birlikte kullanılabilir.

Vue.js Öğrenmeden Önce Neleri Bilmek Gerekir?

Vue.js'e başlamadan önce ileri düzey yazılımcı olmak gerekmez. Ancak HTML, CSS ve JavaScript temellerini öğrenmek, Vue'nun çalışma mantığını anlamayı belirgin biçimde kolaylaştırır.

JavaScript'e tamamen yabancı olanların önce birkaç küçük JavaScript projesi yapması yararlı olur. Örneğin basit bir sayaç, yapılacaklar listesi veya form doğrulama çalışması iyi bir başlangıçtır.

Ücretsiz başlangıç kaynakları için MDN Web Docs üzerinden HTML, CSS ve JavaScript konuları çalışılabilir.

Vue 3 mü, Vue 2 mi Öğrenilmeli?

2026 yılında Vue öğrenmeye başlayanlar için temel tercih Vue 3 olmalıdır. Vue 2'nin resmî yaşam döngüsü desteği sona ermiştir. Bu nedenle yeni projelerde Vue 3 dokümantasyonunu esas almak daha uygundur.

Vue 3; Composition API, modern bileşen yapısı ve güncel geliştirme araçlarıyla çalışmayı destekler.

Options API ve Composition API Arasındaki Fark

Vue'da bileşen mantığını yazmak için iki temel yaklaşım bulunur:

• Options API: Bileşenin verilerini, metotlarını ve diğer özelliklerini ayrı seçenekler üzerinden tanımlar.
• Composition API: Reaktif durum ve işlevleri JavaScript fonksiyonlarıyla düzenlemeyi sağlar.

Her iki yaklaşım da Vue 3 içinde kullanılabilir. Yeni başlayanlar için temel kavramları öğrenmek önceliklidir. Tam ölçekli modern Vue uygulamalarında ise Composition API ve <script setup> yapısını öğrenmek yararlı olacaktır.

Vue.js Ücretsiz Nereden Öğrenilir?

Vue.js öğrenmek için ücretli eğitim almak zorunlu değildir. Resmî dokümantasyon, tarayıcı üzerinden çalışan öğreticiler ve açık kaynak örnek projelerle ücretsiz bir öğrenme süreci oluşturulabilir.

Vue'nun resmî öğreticisi, kodu doğrudan tarayıcı üzerinde değiştirerek sonucu görmeye olanak tanır. Bu nedenle ilk aşamada bilgisayara proje kurmadan temel kavramlar denenebilir.

Vue.js Kurulumu Nasıl Yapılır?

Vue.js'i bilgisayarda kullanmak için güncel Node.js sürümü ve bir kod editörü gerekir. Resmî Vue başlangıç rehberinde yeni proje oluşturmak için create-vue aracı önerilmektedir.

1. Node.js Kurulumu

Öncelikle Node.js sitesinden Vue'nun güncel gereksinimlerini karşılayan bir sürüm yükleyin. Vue'nun resmî başlangıç rehberinde Node.js ^22.18.0 || >=24.12.0 sürüm koşulu belirtilmektedir.

2. Yeni Vue Projesi Oluşturma

Terminali açarak aşağıdaki komutu çalıştırın:

npm create vue@latest

Kurulum sırasında proje adı, TypeScript, Vue Router, Pinia ve test araçları gibi seçenekler sorulabilir. İlk projenizde ihtiyaç duymadığınız seçenekleri daha sonra eklemek üzere kapalı bırakabilirsiniz.

3. Projeyi Çalıştırma

cd proje-adi
npm install
npm run dev

proje-adi bölümünü oluşturduğunuz proje klasörünün adıyla değiştirin. Komutun ardından terminalde gösterilen yerel adresi tarayıcıda açarak uygulamayı görüntüleyebilirsiniz.

4. Kod Editörünü Hazırlama

Vue geliştirme sürecinde Visual Studio Code ve Vue - Official uzantısı kullanılabilir. Bu araçlar Vue dosyalarında sözdizimi desteği ve kod tamamlama gibi kolaylıklar sağlar.

Vue.js Temel Konuları Hangi Sırayla Öğrenilmeli?

1. Template Syntax

Vue'nun HTML içinde veri göstermeyi nasıl sağladığını öğrenin. Metin bağlama ve dinamik özellik kullanımı ilk adımlar arasında yer alır.

2. Reaktif Veri Yönetimi

Vue'da veri değiştiğinde arayüzün nasıl güncellendiğini anlamak için ref() ve reactive() kavramlarını çalışın.

3. Olay Yönetimi

Buton tıklama ve kullanıcı etkileşimleri için v-on veya kısaltılmış biçimi olan @click kullanımını öğrenin.

4. Koşullu Gösterim

Belirli koşullarda öğeleri göstermek veya gizlemek için v-if, v-else ve v-show yapılarını inceleyin.

5. Listeleme

Bir dizideki verileri ekrana yazdırmak için v-for kullanımını ve benzersiz key değerlerinin önemini öğrenin.

6. Form Yönetimi

Form alanlarıyla veri bağlantısı kurmak için v-model yapısını çalışın.

7. Component Yapısı

Arayüzü tekrar kullanılabilir bileşenlere ayırmayı, props ile veri aktarmayı ve emit ile üst bileşene olay bildirmeyi öğrenin.

8. Computed ve Watch

Hesaplanan değerler için computed(), veri değişimlerine bağlı yan etkileri yönetmek için watch() kullanımını inceleyin.

Vue.js İlk Proje Örneği: Basit Sayaç

Vue'nun reaktif yapısını anlamak için sayaç uygulaması iyi bir başlangıçtır. Aşağıdaki örneği Vue projenizin App.vue dosyasında deneyebilirsiniz.

<script setup>
import { ref } from 'vue'

const sayac = ref(0)

function artir() {
  sayac.value++
}

function azalt() {
  sayac.value--
}
</script>

<template>
  <main>
    <h1>Vue Sayaç Uygulaması</h1>
    <p>Sayaç: {{ sayac }}</p>
    <button @click="azalt">Azalt</button>
    <button @click="artir">Artır</button>
  </main>
</template>

Bu örnekte ref(0) reaktif bir sayaç değeri oluşturur. Butonlara basıldığında değer değişir ve Vue ekrandaki sayıyı otomatik olarak günceller.

Vue Router Nedir, Ne Zaman Öğrenilmeli?

Vue Router, Vue uygulamalarında istemci tarafı sayfa yönlendirmesini yönetmek için kullanılan resmî yönlendirme çözümüdür.

Örneğin bir uygulamada ana sayfa, ürünler ve iletişim bölümlerinin farklı adreslerde görüntülenmesi Vue Router ile yönetilebilir.

Vue'nun temel bileşen ve veri yönetimi konularını öğrendikten sonra Router konusuna geçmek uygun bir sıradır.

Vue Router ile Öğrenilecek Konular

• Route tanımlama
• RouterLink ve RouterView kullanımı
• Dinamik route parametreleri
• İç içe sayfalar
• Yönlendirme korumaları
• Bulunamayan sayfaların yönetimi

Ücretsiz kaynak: Vue Router Resmî Dokümantasyonu.

Pinia Nedir, Vue.js Öğrenirken Gerekli mi?

Pinia, Vue uygulamalarında birden fazla bileşenin ortak kullandığı verileri merkezi biçimde yönetmek için kullanılan durum yönetimi kütüphanesidir.

Örneğin kullanıcı bilgileri, alışveriş sepeti veya uygulama genelinde kullanılan ayarlar Pinia ile yönetilebilir.

Ancak küçük bir sayaç veya basit bir form uygulaması için Pinia kullanmak zorunlu değildir. Önce bileşenlerin kendi verilerini yönetmeyi ve bileşenler arasında veri aktarmayı öğrenmek daha verimli olabilir.

Ücretsiz kaynak: Pinia Resmî Dokümantasyonu.

Vue.js ile API Kullanımı Nasıl Öğrenilir?

API kullanımı, Vue uygulamasının başka bir sistemden veri almasını veya veri göndermesini sağlar. Örneğin bir ürün listesi, sunucudan alınan verilerle ekranda gösterilebilir.

API çalışmaya başlamadan önce JavaScript'te fetch(), Promise, async ve await kavramlarını öğrenmek yararlı olur.

API Öğrenme Sırası

1. HTTP isteklerinin temel mantığını öğrenin.
2. GET isteğiyle veri çekin.
3. Gelen JSON verisini ekranda listeleyin.
4. Yükleniyor ve hata durumlarını yönetin.
5. POST isteğiyle veri gönderme mantığını öğrenin.
6. Birden fazla bileşende veri kullanımını düzenleyin.

Başlangıç için herkese açık deneme API'leriyle çalışılabilir. Örneğin JSONPlaceholder test verileri sağlayan ücretsiz bir kaynaktır.

Gerçek uygulamalarda kullanıcı verilerinin korunması, yetkilendirme ve API güvenliği gibi konular ayrıca değerlendirilmelidir.

Vue.js Sıfırdan Öğrenme Yol Haritası: 8 Haftalık Plan

Aşağıdaki plan, temel HTML, CSS ve JavaScript bilgisi bulunan bir öğrencinin haftada yaklaşık 6-8 saat çalışması varsayılarak hazırlanmıştır. Bu süre bir garanti değil, örnek çalışma takvimidir.

Her haftanın sonunda yalnızca video veya doküman okumak yerine çalışan küçük bir uygulama oluşturmak, öğrenilen konuları pekiştirmeye yardımcı olur.

Vue.js Öğrenmek İçin Yapılabilecek 5 Proje

1. Yapılacaklar Listesi

Görev ekleme, silme ve tamamlandı olarak işaretleme özellikleriyle reaktif veri yönetimini öğrenin.

2. Not Alma Uygulaması

Not oluşturma, düzenleme, arama ve tarayıcıda saklama özelliklerini ekleyerek form ve listeleme becerilerinizi geliştirin.

3. Ürün Listeleme Sayfası

Ürün kartları, kategori filtreleri ve sıralama seçenekleriyle bileşen yapısını ve computed() kullanımını pekiştirin.

4. API Destekli Gösterge Paneli

Bir API'den veri çekerek yükleme, hata ve boş sonuç durumlarını yönetin.

5. Çok Sayfalı Portfolyo Sitesi

Vue Router kullanarak hakkımda, projeler ve iletişim sayfalarını oluşturun. Projenizi yayınlayarak paylaşılabilir bir portfolyo hazırlayın.

Bu projelerin kaynak kodlarını GitHub üzerinde düzenli biçimde paylaşmak, öğrenme sürecindeki ilerlemeyi somutlaştırabilir.

Vue.js ile Laravel Birlikte Kullanılabilir mi?

Evet. Vue.js ve Laravel birlikte kullanılarak ön yüz ve sunucu tarafı işlemlerinin yer aldığı web uygulamaları geliştirilebilir.

Bu yapıda Vue.js kullanıcı arayüzünü oluştururken Laravel, veritabanı işlemleri, sunucu tarafı iş kuralları ve API uç noktaları gibi görevleri üstlenebilir.

Vue + Laravel Öğrenme Sırası

1. HTML, CSS ve JavaScript temellerini öğrenin.
2. Vue 3 ile bileşen ve reaktif veri yönetimi çalışın.
3. HTTP ve REST API mantığını kavrayın.
4. PHP ve Laravel temellerini öğrenin.
5. Laravel ile API geliştirin.
6. Vue arayüzünden API'ye bağlanın.
7. Veri ekleme, listeleme, güncelleme ve silme işlemlerini bir projede birleştirin.

Vue ve Laravel teknolojilerini birlikte öğrenmek isteyenler, İstanbul Kent Üniversitesi'nin Full Stack Geliştirme (Laravel + Vue + API) Eğitim Programı içeriğini inceleyebilir.

Programın resmî sayfasında Laravel ile backend geliştirme, veritabanı bağlantıları, Vue ile yönetim paneli oluşturma, API üzerinden veri çekme ve kayıt işlemleri gibi konular yer almaktadır. Program online olarak sunulmaktadır.

Vue.js Öğrenirken Yapılan Yaygın Hatalar

JavaScript Öğrenmeden Framework'e Başlamak

JavaScript temelleri eksik olduğunda Vue'daki veri ve olay yönetimi daha karmaşık görünebilir. Önce temel dil kavramlarını öğrenmek bu sorunu azaltır.

Sürekli Eğitim İzleyip Proje Yapmamak

Yalnızca örnek kodları izlemek yeterli değildir. Kodun bir bölümünü değiştirmek, hata almak ve çözüm aramak öğrenme sürecinin önemli parçalarıdır.

Eski Vue 2 Eğitimlerini Güncel Kaynak Sanmak

Vue 2 ve Vue 3 arasında farklılıklar bulunduğundan öğrenme materyalinin hangi sürümü kullandığı kontrol edilmelidir.

Başlangıçta Çok Fazla Araç Öğrenmeye Çalışmak

Vue Router, Pinia, TypeScript ve test araçlarını aynı anda öğrenmeye çalışmak kafa karıştırabilir. Önce Vue'nun temel özellikleriyle proje oluşturmak daha uygundur.

Hata Mesajlarını Okumamak

Tarayıcı geliştirici araçları ve terminal çıktıları, hatanın kaynağını anlamak için önemlidir. Hata mesajını incelemek yerine kodu rastgele değiştirmek öğrenmeyi zorlaştırabilir.

Vue.js Öğrenmek Ne Kadar Sürer?

Vue.js öğrenme süresi kişinin JavaScript bilgisine, haftalık çalışma saatine ve proje deneyimine göre değişir.

Bu süreler örnek çalışma aralıklarıdır. Birkaç haftada temel kavramları öğrenmek mümkün olsa da profesyonel düzeyde yazılım geliştirme becerisi daha fazla uygulama ve deneyim gerektirir.

Vue.js Öğrenmek İş Bulmak İçin Yeterli mi?

Vue.js bilmek, frontend geliştirme alanında kullanılabilecek önemli bir teknik beceridir. Ancak iş başvurularında yalnızca bir framework bilgisi yeterli olmayabilir.

HTML, CSS, JavaScript, Git, API kullanımı, responsive tasarım ve hata ayıklama gibi becerilerin de geliştirilmesi önemlidir. Bazı pozisyonlarda TypeScript, test araçları veya backend bilgisi de beklenebilir.

Özellikle başlangıç seviyesindeki adayların küçük fakat tamamlanmış projelerden oluşan bir portfolyo hazırlaması, teknik becerilerini göstermelerine yardımcı olabilir.

Vue.js Öğrenenler Hangi Pozisyonları Araştırabilir?

• Frontend Developer
• Junior Frontend Developer
• Vue.js Developer
• Web Developer
• Frontend Stajyeri
• Full Stack Developer (ek backend yetkinliğiyle)

Bu unvanlar olası kariyer yönelimlerini gösterir; belirli bir eğitimi tamamlamak işe alınma garantisi vermez.

Vue.js Hakkında Sık Sorulan Sorular

Sonuç: Vue.js Öğrenmeye Nereden Başlamalı?

Vue.js öğrenmek isteyenler için en etkili başlangıç, HTML, CSS ve JavaScript temellerini tamamladıktan sonra Vue 3'ün resmî öğreticisini takip etmektir. İlk aşamada reaktif veri yönetimi, olaylar, formlar ve bileşen yapısı üzerinde çalışılmalıdır.

Temel konular öğrenildikten sonra Vue Router, Pinia ve API kullanımıyla daha kapsamlı projeler geliştirilebilir. Düzenli pratik yapmak ve tamamlanan projeleri bir portfolyoda toplamak, öğrenme sürecini daha somut hâle getirir.

Ücretsiz kaynaklar Vue.js öğrenmek için güçlü bir başlangıç sunar. Laravel ve API entegrasyonu gibi daha geniş kapsamlı konulara yönelmek isteyenler ise ihtiyaçlarına uygun ek eğitimleri değerlendirebilir.

Kaynaklar ve İlgili Eğitim

• Vue.js - Resmî Ücretsiz Öğretici
• Vue.js - Resmî Dokümantasyon
• Vue.js - Kurulum ve Hızlı Başlangıç
• Vue Router - Resmî Dokümantasyon
• Pinia - Resmî Dokümantasyon
• MDN - JavaScript Öğrenme Kaynakları
• İstanbul Kent Üniversitesi - Full Stack Geliştirme (Laravel + Vue + API) Eğitim Programı

Güncelleme: 2 Kasım 2026. Vue ve Node.js kurulum gereksinimleri zamanla değişebilir. Kurulum sırasında resmî dokümantasyondaki güncel sürüm koşulları kontrol edilmelidir.