Laravel ve Vue.js: Full Stack Geliştirme Rehberi

March 23, 2025

Merhaba arkadaşlar, bugün sizlere Laravel ve Vue.js ikilisiyle nasıl full stack (tam yığın) geliştirme yapabileceğinizi anlatacağım. Laravel, backend geliştirme için harika bir framework iken, Vue.js de modern ve dinamik frontend uygulamaları oluşturmak için mükemmel bir araçtır. Bu ikiliyi bir araya getirerek, hem hızlı hem de kullanıcı dostu web uygulamaları geliştirebilirsiniz. Gelin, bu süreci adım adım inceleyelim.

Laravel ve Vue.js Neden Birlikte Kullanılır?

Laravel: Backend işlemlerini kolaylaştıran, güvenli ve sürdürülebilir bir PHP framework’üdür.
Vue.js: Kullanıcı arayüzü oluşturmak için kullanılan, hafif ve esnek bir JavaScript framework’üdür.
Uyumluluk: Laravel ve Vue.js, birbirleriyle sorunsuz bir şekilde entegre olabilir. Laravel’in API yapısı, Vue.js’in dinamik frontend’i ile mükemmel bir uyum sağlar.

Laravel ve Vue.js ile Full Stack Geliştirme Adımları

Laravel Projesi Oluşturma

İlk olarak, yeni bir Laravel projesi oluşturalım:

composer create-project --prefer-dist laravel/laravel laravel-vue-app

Vue.js Kurulumu

Laravel, Vue.js’i varsayılan olarak destekler. Vue.js’i projenize eklemek için aşağıdaki komutu çalıştırın:

npm install vue@next vue-loader@next

Ardından, Vue.js’i projenize entegre edin:

npm install

API Route’ları Oluşturma

Laravel’de Vue.js ile iletişim kurmak için API route’ları oluşturun. Örneğin, routes/api.php dosyasına bir route ekleyelim:

Route::get('/users', function () { 
   return response()->json([        'users' => [            ['id' => 1, 'name' => 'John Doe'],            ['id' => 2, 'name' => 'Jane Doe'],    
    ]    
]);});

Vue Component’leri Oluşturma

Vue.js ile bir component oluşturalım. Örneğin, resources/js/components/UserList.vue dosyasını oluşturun:

<template>   
 <div> 
  <h1>Kullanıcı Listesi</h1>      
  <ul>         
   <li v-for="user in users" :key="user.id">{{ user.name }}</li>     
   </ul>  
  </div>
</template>

<script> export default {
    data() {    
    return {     
       users: []      
  };    },    mounted() { 
      this.fetchUsers();   
 },    methods: {        fetchUsers() {
            axios.get('/api/users')     
           .then(response => {    
               this.users = response.data.users;             
   });        }    } };


 </script>

Vue Component’ini Kullanma

Oluşturduğunuz component’i ana Vue dosyasına ekleyin. resources/js/app.js dosyasını açın ve component’i kaydedin:

import { createApp } from 'vue';import UserList from './components/UserList.vue';const app = createApp({}); app.component('user-list', UserList); app.mount('#app');

Blade Template’de Vue’yu Kullanma

Vue component’ini Blade template’de kullanmak için resources/views/welcome.blade.php dosyasını açın ve aşağıdaki kodu ekleyin:

<div id="app">    <user-list></user-list></div><script src="{{ mix('js/app.js') }}"></script>

Projeyi Derleme ve Çalıştırma

Vue.js component’lerini derlemek için aşağıdaki komutu çalıştırın:

npm run dev

Ardından, Laravel projenizi çalıştırın:

php artisan serve

Tarayıcınızdan http://localhost:8000 adresine giderek uygulamanızı görüntüleyebilirsiniz.

Laravel ve Vue.js ile Full Stack Geliştirmenin Avantajları

Hızlı Geliştirme: Laravel ve Vue.js, hızlı ve etkili bir geliştirme süreci sunar.
Dinamik Kullanıcı Arayüzü: Vue.js ile modern ve dinamik bir kullanıcı arayüzü oluşturabilirsiniz.
Güvenlik: Laravel, backend tarafında güvenli bir yapı sunar.