Sarıkaya Dev Logo
design

Laravel 10 Vue 3 Vite Kurulumu

February 14, 2024

1- Öncelikle Bilgisarımıza Laravel İndirelim

composer create-project laravel/laravel laravel10-vue3

proje kurulduktan sonra yüklenilen konuma gidelim. 

2- npm paket yönetisiyle vue paketlerini kuralım

npm install

npm install vue@next vue-loader@next

3- Vite için vue pluginlerini kuralım 

npm install'@vitejs/plugin-vue


4: Dosyayı Düzenleyelim vite.config.js

vite.config.js

javascript
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

import vue from '@vitejs/plugin-vue'


export default defineConfig({
    plugins: [

        vue(),

        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

----------------------

5- resources/js/app.js dosyasını düzenleyelim

app.js

javascript
import {createApp} from 'vue'

import App from './App.vue'

createApp(App).mount("#app")

----------------------

6- resources/views içerisne app.blade.php dosyasını oluşturalım Aşağıdaki Kodları Yapıştıralım

app.blade.php

html
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>ًApplication</title>
        @vite('resources/css/app.css')
    </head>
    <body>
        <div id="app"></div>
        @vite('resources/js/app.js')
    </body>
</html>

----------------------

7- Daha sonra resources/js içerisine App.vue dosyasını oluşturalım

App.vue

js
<template>
  
 <div> Laravel 10 vue 3 Entegrasyonu </div>
   
</template>

----------------------

8- web.php dosyasına aşağıdaki kodu ekleyelim

web.php

php
<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('app');
})
->name('application')

9- php artisan serve komutunu çalıştıralım

10-npm run dev komutunu çalıştıralım


8 + 2 =