Sarıkaya Dev Logo
design

How To Install Vue 3 In Laravel 10 With Vite

February 14, 2024

1- First, let's download Laravel to our computer

composer create-project laravel/laravel laravel10-vue3

After the project is installed, let's go to the installed location.

2- Let's install vue packages with npm package manager


npm install

npm install vue@next vue-loader@next


3- Let's install vue plugins for Vite

npm install'@vitejs/plugin-vue

3- Install Plugin Vue From Vite

npm i @vitejs/plugin-vue

4-Edit file vite.config.js


edit file ->

vite.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,
        }),
    ],
});

5- Edit File app.js Inside Folder resources/js


edit file ->

app.js

js
import {createApp} from 'vue'

import App from './App.vue'

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

6-Create File app.blade.php Inside Folder resources/views


edit file ->

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- Create File App.vue Inside Folder resources/js


edit file ->

App.vue

html
<template>
    <h1>
        How To Install Vue 3 in Laravel 10 : ZWebCourses :)
    </h1>
</template>

8-Edit File web.php Inside Folder routes


edit file ->

web.php

php
<?php

use Illuminate\Support\Facades\Route;

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

9-Run PHP Local Server

php artisan serve

10-Run Node Local Server

npm run dev


Go to the following link http://127.0.0.1:8000/ and finish!



"
selamin / 2025-03-09

aleykum

0 + 5 =