Preview
What is Laravel
- Laravel is a web application framework with expressive, elegant syntax.
- A web framework provides a structure and starting point for creating your application, allowing you to focus on creating something amazing while we sweat the details.
What is Vue js!
- Vue is a JavaScript framework for building user interfaces.
- It builds on top of standard HTML, CSS, and JavaScript.
- It Helps you efficiently develop user interfaces, be they simple or complex.
What is Vite js!
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:
A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).
A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.
We conclude from the above that the most important thing that distinguishes vite is the speed at the start of the server, as well as making a bundle of files upon completion of the project.
Step 1: Create New Laravel Project
composer create-project laravel/laravel laravel10-vue3
Step 2: How To Install Vue 3 on Laravel 10
npm install
npm install vue@latest
Step 3: Install Plugin Vue From Vite
npm i @vitejs/plugin-vue
Step 4: Edit File vite.config.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,
}),
],
});
Step 5: Edit File app.js Inside Folder resources/js
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")
Step 6: Create File app.blade.php Inside Folder resources/views
Make sure to add the css file and javascript as shown and also the div with id=app
<!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>
Step 7: Create File App.vue Inside Folder resources/js
<template>
<h1>
How To Install Vue 3 in Laravel 10 : ZWebCourses :)
</h1>
</template>
Step 8: Edit File web.php Inside Folder routes
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('app');
})
->name('application');
Step 9: Run PHP Local Server
php artisan serve
Step 10: Run Node Local Server
npm run dev
Go to the following link
http://127.0.0.1:8000/and you will find the following
- You will find the repo for this project on github at this Link https://github.com/laravelspa/laravel10-vue3
Top comments (0)