Teklif Al
Teklif Al

Instagram

Makale

Laravel ile Vue 3 Nasıl Kullanılır

Yazan

Metgesoft

Yayın Tarihi

2024-02-12 20:29:10

Laravel Vue 3 Kullanımı

Laravel ile Vue 3 Kullanımı nasıl olmalıdır. Bu yazımızda bu konuya değineceğiz. Fullstack Web Geliştiricilerinin vazgeçilmezi olan Laravel ve Vue laravel çatısı altında kullanıma sunuldu.Adım adım kurulumu inceleyelim.

 

Laravel Kurulumu

composer create-project laravel/laravel guide-to-laravel-and-vue

 

Npm paketlerini indirelim

npm install

npm dosyalarını indirip node_modules klasörünü projemize dahil ettikten sonra sıra geldi. Npm ile vue kurulumuna 

npm install --save-dev vue

 

Laravel içine vue kurduktan sonra package.json dosyamızı örnekteki gibi düzenliyoruz.

// package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue": "^3.2.37"
    }
}

Tüm bu işlemleri yaptıktan sonra laravel tarafında resource klasörümüz altındaki app.js dosyamızı düzenliyoruz

 

// resources/app.js

require('./bootstrap');

import { createApp } from 'vue';
import HelloVue from './components/HelloVue.vue';

createApp({
    components: {
        HelloVue,
    }
}).mount('#app');

 

Hemen sonrasında resource/js altında bulunan klasör içine component adında bir klasör oluşturup bunun içine HelloVue.vue dosyamızı oluşturalım ve app.js dosyamızı şu şekilde düzenleyelim:

// resources/app.js

require('./bootstrap');

import { createApp } from 'vue';
import HelloVue from './components/HelloVue.vue';

createApp({
    components: {
        HelloVue,
    }
}).mount('#app');

 

Vue kurulumumuzu başarılı bir şekilde oluşturduktan sonra resource altındaki js dosyalarımızı derleme işlemi olan son adımımıza geçelim. Bu adımda laravel mix kullanarak js dosyalarımızı public/js altında tek bir dosya altında topluyoruz.

Bu işlemler için laravel ana klasör içine bulunan webpack.mix.js dosyamıza giderek şu şekilde düzenliyoruz:

// webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue({
        version: 3,
    })
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

 

Harika! Vue dosyalarımızı sisteme dahil edip js dosyalarımızı sorunsuz bir şekilde derledik. Şimdi bu işlemleri test edelim. Laravel içinde oluşturduğumuz welcome.blade.php dosyamız içine vue tarafında mount("#app") ettiğimiz id yi dahil edelim

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="app"> </div>

</body>
</html>

 

Test etmek için php artisan serve komutunu çalıştırarak ekranda çıkan Hello Vue yazısını görebilirsiniz. 

 

Bu yazımızda Laravel+Vue kullanımından bahsettik umarım sizin için yararlı bir makale olmuştur. Laravel ve Vue senkronize bir şekilde sorunsuz çalıştığında mükemmel çalışmalar ortaya çıkmaktadır.

Saygılarımla...