composer create-project laravel/laravel laravel10-vue3
After the project is installed, let's go to the installed location.
npm install
npm install vue@next vue-loader@next
npm install'@vitejs/plugin-vue
npm i @vitejs/plugin-vue
vite.config.jsvite.config.js · js
// vite.config.js
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,
}),
],
});app.js Inside Folder resources/jsapp.js · js
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")app.blade.php Inside Folder resources/viewsapp.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>App.vue Inside Folder resources/jsApp.vue · html
<template>
<h1>
How To Install Vue 3 in Laravel 10 : ZWebCourses :)
</h1>
</template>web.php Inside Folder routesweb.php · php
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('app');
})
->name('application');php artisan serve
npm run dev
Go to the following link http://127.0.0.1:8000/ and finish!
Written by
Mahmut Sarıkaya
Software Developer
2025-03-09
aleykum
