Vue.js: Sıfırdan İleri Seviyeye Kapsamlı 2026 Rehberi

Web geliştirme dünyası 2026'da her zamankinden daha dinamik ve rekabetçi. Geliştiriciler, kullanıcı deneyimini ön planda tutan, performansı yüksek ve bakımı kolay uygulamalar oluşturmak için sürekli yeni araçlar arıyor. İşte tam bu noktada **Vue.js**, esnekliği, öğrenme kolaylığı ve güçlü ekosistemiyle öne çıkıyor. Bu kapsamlı rehberde, Vue.js'in temellerinden ileri seviye konularına, 2026'nın en güncel yaklaşımlarıyla derinlemesine dalacak, pratik örneklerle bilginizi pekiştirecek ve kendi projelerinizde hemen uygulamaya başlayacaksınız. ## Vue.js Nedir? **Vue.js**, kullanıcı arayüzleri oluşturmak için kullanılan aşamalı olarak benimsenebilir (progressively adoptable) bir JavaScript çerçevesidir. Temel kütüphanesi sadece görünüm katmanına odaklanırken, karmaşık tek sayfa uygulamaları (SPA) geliştirmek için resmi destekleyici kütüphaneler ve araçlar sunar. 2026 itibarıyla Vue 3.x, Composition API gibi modern özelliklerle geliştiricilere daha güçlü ve esnek bir deneyim sunmaktadır. Vue.js, ilk olarak Evan You tarafından geliştirilmiş ve 2014 yılında halka açık hale getirilmiştir. Minimalist yapısı sayesinde hızlıca öğrenilebilirken, büyük ölçekli ve performans odaklı uygulamalar için de tüm gerekli yetenekleri barındırır. Modern web geliştirmenin temel taşlarından biri haline gelmiş, özellikle esnekliği ve hafif yapısıyla dikkat çekmektedir. Ekibimizde birçok projede Vue.js'i tercih etmemizin ana nedenlerinden biri, hızlı prototipleme imkanı ve geliştirme maliyetlerini düşürmesidir. ## Neden Vue.js Kullanmalısınız? 2026 yılında Vue.js kullanmak için birçok geçerli neden bulunmaktadır. Özellikle frontend geliştirme alanında kariyer yapmak veya mevcut projelerinizi daha verimli hale getirmek istiyorsanız, Vue.js size önemli avantajlar sunar: * **Öğrenme Eğrisi ve Kullanım Kolaylığı**: Vue.js, diğer popüler framework'lere kıyasla daha nazik bir öğrenme eğrisine sahiptir. Temel HTML, CSS ve JavaScript bilgisi olan herkes, kısa sürede Vue.js ile çalışmaya başlayabilir. Sezgisel API'ı ve detaylı dökümantasyonu sayesinde geliştiriciler hızla adapte olabilir. Son projemizde yeni başlayan junior geliştiricilerin bile Vue.js ile kısa sürede verimli olabildiğini gözlemledik. * **Esneklik (Progressive Adoption)**: Vue.js'i projenize kademeli olarak entegre edebilirsiniz. Mevcut bir projeye küçük bir interaktif bileşen eklemekten, sıfırdan büyük bir tek sayfa uygulama geliştirmeye kadar geniş bir yelpazede kullanılabilir. Bu esneklik, özellikle kurumsal projelerde mevcut altyapıyı bozmadan modernizasyon yapmak isteyen ekipler için kritik bir avantajdır. * **Performans**: Vue 3 ile birlikte gelen sanal DOM iyileştirmeleri, derleme zamanı optimizasyonları ve küçük boyutlu çekirdek kütüphanesi sayesinde Vue.js uygulamaları oldukça hızlıdır. Özellikle `Composition API` ile daha optimize edilmiş ve okunabilir kod yazmak mümkündür, bu da performans kazanımlarını destekler. * **Geniş ve Aktif Topluluk**: Vue.js, 2026 itibarıyla dünya çapında milyonlarca geliştirici tarafından kullanılan, aktif ve destekleyici bir topluluğa sahiptir. Bu, karşılaştığınız sorunlara hızlıca çözüm bulabileceğiniz, kaynaklara kolayca erişebileceğiniz ve sürekli güncellenen bir ekosistemden faydalanabileceğiniz anlamına gelir. GitHub üzerinde yüksek yıldız sayısı ve npm üzerinde milyonlarca indirme, bu popülerliğin somut göstergeleridir. * **Zengin Ekosistem ve Araçlar**: Vue.js, resmi olarak desteklenen yönlendirme (`Vue Router`), durum yönetimi (`Pinia`), derleme (`Vite`) ve test (`Vitest`) araçlarına sahiptir. Ayrıca Nuxt.js gibi meta-framework'ler ile sunucu taraflı render (SSR) ve statik site oluşturma (SSG) gibi ileri seviye özellikler de kolayca entegre edilebilir. * **Bakım Kolaylığı**: Single File Components (SFC) yapısı sayesinde HTML, CSS ve JavaScript kodunu tek bir dosyada düzenli bir şekilde tutmak mümkündür. Bu, bileşenlerin anlaşılmasını ve bakımını kolaylaştırır. ## Vue.js vs Alternatifler (2026 Karşılaştırması) Frontend framework seçimi, projenin başarısı için kritik bir karardır. 2026 itibarıyla Vue.js, React ve Angular, pazarın en dominant oyuncularıdır. İşte bu üç popüler framework'ün karşılaştırmalı bir analizi: | Özellik | Vue.js (2026) | React (2026) | Angular (2026) | | :------------------ | :---------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | | **Performans** | Sanal DOM, derleme optimizasyonları ile yüksek performans. Hafif çekirdek. | Sanal DOM, React Fiber ile güçlü performans. Geniş kütüphane boyutu. | Değişim algılama mekanizması, AOT derleme ile iyi performans. Büyük boyutlu. | | **Öğrenme Eğrisi** | En kolay öğrenilebilir. Sezgisel API, detaylı dökümantasyon. | Orta seviye. JavaScript/JSX bilgisi gerektirir. Hook'lar ile modernleşti. | En dik öğrenme eğrisi. TypeScript bilgisi, RxJS, güçlü yapı gerektirir. | | **Ekosistem** | Pinia, Vue Router, Vite, Nuxt.js. Kapsamlı ve entegre. | Redux, React Router, Next.js. Geniş ama daha parçalı. | RxJS, Angular CLI, NgRx. Kapsamlı ve opinionated. | | **Topluluk** | Çok aktif ve büyüyen. Çin'de ve Avrupa'da güçlü. | En büyük ve en aktif. Meta (Facebook) tarafından destekleniyor. | Google tarafından desteklenen, kurumsal odaklı. | | **Kurumsal Destek** | Bağımsız, topluluk odaklı. Büyük şirketlerde de kullanılıyor. | Meta (Facebook) tarafından güçlü destek. | Google tarafından güçlü destek. Büyük kurumsal projelerde tercih ediliyor. | | **Kullanım Alanı** | Küçük/orta ölçekli SPA'lar, mevcut projelere entegrasyon, hızlı prototipleme. | Her ölçekte SPA, mobil (React Native), kurumsal uygulamalar. | Büyük ölçekli kurumsal uygulamalar, karmaşık işlevsellikler. | > **Deneyim Notu:** Vue.js'in esnekliği, özellikle mevcut bir PHP veya .NET projesine modern bir frontend katmanı eklemek istediğinizde paha biçilmezdir. React veya Angular'ın 'her şeyi' değiştirmesi gerekebilirken, Vue.js'i küçük, bağımsız bileşenler halinde kolayca entegre edebilirsiniz. Bu, 2026'da legacy sistemlerle çalışan birçok şirket için büyük bir kolaylık sağlamaktadır. ## Kurulum ve İlk Adımlar (2026) Vue.js ile bir projeye başlamak, 2026 itibarıyla **Vite** ile çok daha hızlı ve kolaydır. Vite, Vue.js ekibi tarafından önerilen, geliştirme deneyimini önemli ölçüde artıran yeni nesil bir build tool'dur. İşte adım adım kurulum süreci: ### Ön Gereksinimler Vue.js projesi oluşturmadan önce sisteminizde aşağıdaki yazılımların yüklü olması gerekmektedir: * **Node.js**: Sürüm 16.x veya üzeri (2026 için önerilen kararlı sürüm). Node.js, JavaScript çalışma zamanıdır ve npm (Node Package Manager) ile birlikte gelir. * **npm** veya **Yarn**: Paket yöneticisi. Node.js ile birlikte npm gelir, Yarn'ı ayrıca kurabilirsiniz. ### Adım 1: Vite ile Yeni Bir Vue Projesi Oluşturma Terminalinizi açın ve aşağıdaki komutu çalıştırın. Bu komut, size proje adını, kullanmak istediğiniz framework'ü (Vue.js) ve TypeScript desteğini soracaktır. ```bash npm create vue@latest # veya yarn create vue@latest ``` Komutu çalıştırdıktan sonra aşağıdaki gibi sorularla karşılaşacaksınız: ```bash Vue.js projesi oluşturmak için: ✔ Project name: › my-vue-app ✔ Add TypeScript? › No / Yes (Tercihinize göre seçin) ✔ Add JSX Support? › No / Yes ✔ Add Vue Router for Single Page Application development? › No / Yes ✔ Add Pinia for State Management? › No / Yes ✔ Add Vitest for Unit Testing? › No / Yes ✔ Add an End-to-End Testing Solution? › No / Yes ✔ Add ESLint for code quality? › No / Yes ✔ Add Prettier for code formatting? › No / Yes ``` Seçimlerinizi yaptıktan sonra Vite, projenizi saniyeler içinde oluşturacaktır. ### Adım 2: Proje Dizinine Gitme ve Bağımlılıkları Yükleme Proje oluşturulduktan sonra, proje dizinine geçin ve gerekli bağımlılıkları yükleyin: ```bash cd my-vue-app npm install # veya yarn install ``` ### Adım 3: Geliştirme Sunucusunu Başlatma Tüm bağımlılıklar yüklendikten sonra, projenizi yerel geliştirme sunucusunda çalıştırabilirsiniz: ```bash npm run dev # veya yarn dev ``` Bu komut, projenizi genellikle `http://localhost:5173` adresinde başlatacaktır. Tarayıcınızda bu adrese giderek Vue.js uygulamanızın çalıştığını görebilirsiniz. > **Pro Tip:** 2026'da modern Vue.js geliştirme için Vite, hem geliştirme hızı hem de derleme performansı açısından Vue CLI'ya göre çok daha avantajlıdır. Eski projelerde Vue CLI görseniz de, yeni projelerde Vite'ı tercih etmek, uzun vadede size zaman kazandıracaktır. ## Temel Kullanım ve Örnekler Vue.js'in temel yapı taşlarını ve en yaygın kullanım senaryolarını anlamak, framework'e hakim olmanın ilk adımıdır. İşte birkaç pratik örnek: ### Örnek 1: Basit Bir Sayaç Bileşeni **Problem:** Bir butona her tıklandığında artan bir sayacı görüntülemek. **Çözüm:** Vue'nun reaktif veri sistemini kullanarak bir `ref` tanımlayacak ve butona tıklandığında bu `ref`'i güncelleyeceğiz. ```vue ``` ### Örnek 2: Dinamik Liste Oluşturma **Problem:** Bir dizi elemanı listelemek ve yeni elemanlar eklemek. **Çözüm:** `v-for` direktifini kullanarak diziyi dönecek ve `v-model` ile input alanından yeni eleman ekleyeceğiz. ```vue ``` ### Örnek 3: API'dan Veri Çekme **Problem:** Bir REST API'dan veri çekip Vue uygulamasında görüntülemek. **Çözüm:** `onMounted` yaşam döngüsü kancasını ve `fetch` API'ını kullanarak bileşen yüklendiğinde veri çekeceğiz. ```vue ``` ### Örnek 4: Bileşenler Arası İletişim (Props & Emits) **Problem:** Ebeveyn bileşenden alt bileşene veri göndermek ve alt bileşenden ebeveyne olay bildirmek. **Çözüm:** `props` ile veri akışını sağlayacak, `emit` ile olayları tetikleyeceğiz. ```vue ``` ```vue ``` ## İleri Seviye Teknikler (2026) Vue.js'in gücü, temel bileşen yönetiminin ötesine geçer. 2026'da modern Vue.js uygulamaları geliştirirken kullanabileceğiniz bazı ileri seviye teknikler: ### 1. Composition API Vue 3 ile tanıtılan **Composition API**, bileşen mantığını daha esnek ve yeniden kullanılabilir bir şekilde organize etmenizi sağlar. Özellikle büyük ve karmaşık bileşenlerde `Options API`'ın getirdiği mantık dağınıklığını (logic scattering) çözer. Reaktif durum, hesaplanmış özellikler, yaşam döngüsü kancaları gibi özellikleri bir araya getiren `setup` fonksiyonu veya ` ``` ### 2. Pinia ile Durum Yönetimi **Pinia**, 2026 itibarıyla Vue.js için önerilen resmi durum yönetim kütüphanesidir. Daha hafif, daha tip güvenli (TypeScript dostu) ve daha kolay öğrenilebilir bir alternatif olarak Vuex'in yerini almıştır. Modüler yapısı sayesinde büyük uygulamalarda durumu yönetmeyi basitleştirir. **Örnek:** Pinia store oluşturma ve kullanma. ```javascript // src/stores/counter.js import { defineStore } from 'pinia'; export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), getters: { doubleCount: (state) => state.count * 2 }, actions: { increment() { this.count++; }, decrement() { this.count--; } } }); ``` ```vue ``` ### 3. Vue Router ile Yönlendirme **Vue Router** (v4.x veya üzeri), Vue.js uygulamaları için resmi yönlendirme kütüphanesidir. Tek sayfa uygulamalarında farklı URL'lere farklı bileşenleri eşlemenizi sağlar. **Örnek:** Basit bir yönlendirme kurulumu. ```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; ``` ```javascript // src/main.js (uygulamanızın ana dosyası) import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; const app = createApp(App); app.use(router); app.mount('#app'); ``` ```vue ``` ### 4. Custom Directives (Özel Direktifler) Vue.js'in `v-if`, `v-for` gibi yerleşik direktifleri gibi, kendi özel direktiflerinizi de oluşturabilirsiniz. Bu, DOM üzerinde doğrudan manipülasyon gerektiren tekrarlayan görevler için kullanışlıdır. **Örnek:** Bir elemente odaklanmayı sağlayan `v-focus` direktifi. ```javascript // src/directives/focus.js export const focusDirective = { mounted: (el) => el.focus() }; ``` ```javascript // src/main.js import { createApp } from 'vue'; import App from './App.vue'; import { focusDirective } from './directives/focus'; const app = createApp(App); app.directive('focus', focusDirective); app.mount('#app'); ``` ```vue ``` ## Best Practices & Anti-Patterns (2026) Vue.js geliştirirken kod kalitesini, performansı ve sürdürülebilirliği artırmak için bazı en iyi uygulamaları takip etmek önemlidir. Aynı zamanda kaçınılması gereken bazı anti-pattern'lar da vardır. ### ✅ Best Practices * **Tek Sorumluluk Prensibi (Single Responsibility Principle)**: Her bileşen veya composable, tek bir göreve odaklanmalıdır. Bu, kodun daha okunabilir, test edilebilir ve yeniden kullanılabilir olmasını sağlar. * **Props Doğrulama (Props Validation)**: `defineProps` içinde `type`, `required`, `default` gibi seçeneklerle prop'larınızı her zaman doğrulayın. Bu, bileşenlerinizin daha sağlam olmasını sağlar ve hataları erken yakalamanıza yardımcı olur. * **`key` Kullanımı (`v-for` ile)**: `v-for` kullanırken her zaman benzersiz bir `key` prop'u sağlayın. Bu, Vue'nun DOM'u daha verimli bir şekilde güncellemesine olanak tanır ve liste işleme sorunlarını önler. * **Composition API'ı Tercih Edin**: Vue 3 ile birlikte Composition API, mantık yeniden kullanımını ve kod organizasyonunu büyük ölçüde iyileştirir. Yeni projelerde ve karmaşık bileşenlerde Options API yerine Composition API'ı kullanmayı düşünün. * **Pinia ile Durum Yönetimi**: Uygulamanız büyüdükçe, global durumu yönetmek için Pinia'yı kullanın. Bu, veri akışını merkezi hale getirir ve hata ayıklamayı kolaylaştırır. * **Lazy Loading (Tembel Yükleme)**: Özellikle büyük uygulamalarda, rota bazlı bileşenleri veya büyük kütüphaneleri tembel yükleyerek uygulamanızın başlangıç performansını artırın. Bu, kullanıcının yalnızca ihtiyaç duyduğu kodu indirmesini sağlar. * **ESLint ve Prettier Kullanımı**: Tutarlı kod stili ve kalitesi için ESLint ve Prettier gibi araçları projenize entegre edin. Bu, ekip içinde kod standartlarını korumaya yardımcı olur. * **Erişilebilirlik (Accessibility - A11y)**: Semantic HTML kullanın, klavye navigasyonunu destekleyin ve ARIA niteliklerini gerektiğinde uygulayın. Tüm kullanıcılar için kapsayıcı bir deneyim sağlamak 2026'da her zamankinden daha önemli. * **Güvenlik Pratikleri**: API anahtarlarını client tarafında açıkça bırakmaktan kaçının. Kullanıcı girdilerini her zaman sanitize edin ve XSS gibi saldırılara karşı dikkatli olun. `v-html` kullanırken çok dikkatli olun ve sadece güvenilir kaynaklardan gelen HTML'i render edin. ### ❌ Anti-Patterns * **Props'ları Doğrudan Değiştirmek**: Bir alt bileşen asla `props` olarak aldığı veriyi doğrudan değiştirmemelidir. Bunun yerine, bir `emit` olayı tetikleyerek ebeveyn bileşenin veriyi güncellemesini sağlamalıdır. Bu, tek yönlü veri akışını (one-way data flow) bozar ve hata ayıklamayı zorlaştırır. * **`v-if` yerine `v-show`'u Yanlış Kullanmak**: `v-if`, bir bileşeni DOM'dan tamamen kaldırırken, `v-show` sadece CSS `display` özelliğini değiştirir. Çok sık değişen durumlar için `v-show`, nadiren değişen ve pahalı bileşenler için `v-if` tercih edilmelidir. Yanlış kullanım performans sorunlarına yol açabilir. * **`index`'i `key` olarak Kullanmak**: `v-for` döngülerinde `index`'i `key` olarak kullanmak, listenin elemanları değiştiğinde veya sıralandığında reaktivite sorunlarına ve performans düşüşlerine neden olabilir. Her zaman benzersiz bir ID kullanın. * **Büyük ve Tekil Bileşenler (God Components)**: Tüm mantığı tek bir büyük bileşende toplamak yerine, küçük, odaklanmış ve yeniden kullanılabilir bileşenlere ayırın. Bu, kodun okunabilirliğini ve bakımını zorlaştırır. ## Yaygın Hatalar ve Çözümleri (Troubleshooting) Vue.js geliştirirken karşılaşabileceğiniz bazı yaygın hatalar ve bunların çözümleri: 1. **Problem:** `[Vue warn]: A component cannot be a root element of a transition.` * **Sebep:** `Transition` bileşeni birden fazla kök elemente uygulanmaya çalışılıyor. Vue 3'te `Transition` bileşeni yalnızca tek bir kök element üzerinde çalışır. * **Çözüm:** `Transition` içine almak istediğiniz elementleri tek bir `div` veya `template` etiketi içine sarın. ```vue ``` 2. **Problem:** `[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.` * **Sebep:** Bir alt bileşende `props` olarak gelen bir değeri doğrudan değiştirmeye çalışmak. * **Çözüm:** Prop değerini doğrudan değiştirmeyin. Bunun yerine, değeri alt bileşende bir `ref`'e kopyalayın ve bu `ref`'i güncelleyin, ya da `emit` kullanarak ebeveyn bileşenin prop'u güncellemesini sağlayın. ```vue ``` 3. **Problem:** Reaktif olmayan bir değişkeni güncellemeye çalışmak (`ref` veya `reactive` kullanılmaması). * **Sebep:** `setup` içindeki bir değişkene `ref` veya `reactive` sarmalayıcıları olmadan değer atanması. Bu değişkenler reaktif olmayacağı için UI güncellenmez. * **Çözüm:** Reaktif olması gereken tüm durum değişkenlerini `ref` veya `reactive` ile sarmalayın. ```vue ``` ## Performans Optimizasyonu (2026) Vue.js uygulamalarınızın 2026'da hızlı ve akıcı olmasını sağlamak için çeşitli optimizasyon teknikleri mevcuttur. Performans, kullanıcı deneyimi ve SEO için kritik öneme sahiptir. ### 1. Bileşenlerin Tembel Yüklenmesi (Lazy Loading Components) Uygulamanızın başlangıç yükleme süresini azaltmak için, yalnızca ihtiyaç duyulduğunda yüklenen bileşenler oluşturun. Özellikle rota bazlı bileşenler için bu teknik çok etkilidir. ```javascript // src/router/index.js import { createRouter, createWebHistory } from 'vue-router'; const routes = [ { path: '/', name: 'Home', component: () => import('../views/HomeView.vue') }, { path: '/about', name: 'About', component: () => import('../views/AboutView.vue') }, { path: '/admin', name: 'Admin', component: () => import('../views/AdminView.vue') } // Büyük bileşen ]; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` ### 2. Kod Bölme (Code Splitting) Webpack veya Vite gibi build araçları, uygulamanızın JavaScript kodunu daha küçük parçalara (chunk'lara) bölerek sadece gerekli kodun indirilmesini sağlar. Tembel yükleme, kod bölmenin bir şeklidir. ### 3. Sunucu Taraflı Render (SSR) veya Statik Site Oluşturma (SSG) Özellikle SEO ve ilk yükleme performansı açısından kritik uygulamalar için **Nuxt.js** gibi bir meta-framework kullanarak SSR veya SSG uygulayabilirsiniz. Bu, uygulamanın HTML'ini sunucuda oluşturup tarayıcıya göndermesini sağlar, böylece kullanıcı boş bir sayfa yerine doğrudan içeriği görür. ### 4. `v-if` ve `v-show` Doğru Kullanımı * `v-if`: Koşul `false` olduğunda bileşeni DOM'dan tamamen kaldırır. Koşulun nadiren değiştiği durumlarda (örneğin, bir modalın açılıp kapanması) daha performanslıdır, çünkü bileşenin reaktif dinleyicileri ve kaynakları kaldırılır. * `v-show`: Bileşeni DOM'da tutar ancak `display: none` CSS özelliği ile gizler. Koşulun sık sık değiştiği durumlarda (örneğin, bir tab menüsü) daha iyidir, çünkü bileşenin sürekli oluşturulması/yıkılması maliyetinden kaçınılır. ### 5. Gereksiz Reaktiviteden Kaçınma Her şeyi `ref` veya `reactive` ile sarmalamak yerine, sadece UI'da güncellenmesi gereken verileri reaktif hale getirin. Sabit veriler veya hesaplama sonuçları için `const` veya `let` kullanmak, Vue'nun reaktivite sisteminin daha az iş yapmasını sağlar. ### 6. Bileşen Önbellekleme (``) Değiştirilen ancak DOM'dan kaldırıldığında durumunu korumasını istediğiniz bileşenler için `` bileşenini kullanın. Bu, bileşenin yeniden oluşturulması maliyetinden kaçınır. ```vue ``` ## Gerçek Dünya Proje Örneği: Basit Bir Ürün Kataloğu (2026) Bu bölümde, Vue.js ile basit bir ürün kataloğu uygulaması oluşturarak öğrendiklerimizi pekiştireceğiz. Uygulama, ürünleri listeleyecek ve her bir ürün için detayları gösterecektir. ### Proje Yapısı ``` my-product-catalog/ ├── public/ │ └── index.html ├── src/ │ ├── assets/ │ │ └── style.css │ ├── components/ │ │ ├── ProductCard.vue │ │ └── ProductDetail.vue │ ├── router/ │ │ └── index.js │ ├── views/ │ │ ├── HomeView.vue │ │ └── ProductListView.vue │ │ └── ProductDetailView.vue │ ├── App.vue │ └── main.js ├── package.json └── vite.config.js ``` ### Adım 1: Projeyi Başlatma ve Temel Router Kurulumu Daha önce gösterildiği gibi `npm create vue@latest` ile yeni bir proje oluşturun ve `Vue Router`'ı seçin. ```javascript // src/router/index.js import { createRouter, createWebHistory } from 'vue-router'; import HomeView from '../views/HomeView.vue'; import ProductListView from '../views/ProductListView.vue'; import ProductDetailView from '../views/ProductDetailView.vue'; const routes = [ { path: '/', name: 'Home', component: HomeView }, { path: '/products', name: 'ProductList', component: ProductListView }, { path: '/products/:id', name: 'ProductDetail', component: ProductDetailView, props: true } ]; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` ```javascript // src/main.js import { cre