How to Set Up and Use Vue 3 in Your Laravel 10 App with Vite.
You will find the repo for this project on github at: https://github.com/annajar222/laravel10vue3.git Also here is a video tutorial on how to do it step by step https://youtu.be/Sl-cbnQYPvE
In older versions of Laravel, Vue was set up automatically with every new installation. However, in newer versions, you have to set it up yourself. In this simple guide, I will show you how to do it with quick and easy steps.
What is Laravel ?
Laravel is like a powerful toolbox for web developers. It's a framework written in PHP that provides a structured way to build web applications. It's known for its clean and expressive code, making it easier to create web applications without getting lost in the technical details.
What is Vue.js ?
Vue.js is like the magic wand for web user interfaces. It's a JavaScript framework that works seamlessly with standard web technologies like HTML, CSS, and JavaScript. Vue simplifies the process of building user interfaces, whether you're creating something simple or complex. It's especially popular when building Single Page Applications (SPAs) and works well with Laravel.
What is Vite.js ?
Vite is like a speed booster for web development. It's a tool designed to make modern web project development faster and more efficient. Vite has two main parts: a development server that brings cool features like fast Hot Module Replacement (HMR), and a build command that bundles your code in an optimized way for production. It helps you get your web projects up and running quickly and smoothly.
Now, let's start by creating a new Laravel project. In this case, we'll name it "laravel10vue3"
Create a New Laravel Project
composer create-project laravel/laravel laravel10vue3
Now, let's install Vue 3.
How to Install Vue 3 on Laravel 10
npm install
npm install vue@next vue-loader@next
How to Install Vite to Laravel 10
Now let's install Vite to our Laravel project
npm install vite@latest
After installing Vue and Vite, we need to install the Vue plugin for Vite.
领英推荐
Install Vue Plugin from Vite
npm install @vitejs/plugin-vue
Edit the "vite.config.js" File
You can find it at the root of your Laravel project.
// 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,
}),
],
});
Edit the "app.js" File Inside the "resources/js" Folder
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount("#app");
Create the "app.blade.php" File Inside the "resources/layouts/views/" Folder
Note: If the "layouts" folder does not exist, create one. Then, create the "app.blade.php" file.
Now, make sure to add the CSS and JavaScript files as shown, along with the <div> with the 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>Your Application</title>
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>
Create the "App.vue" File Inside the "resources/js" Folder
<template>
<h1>
How to install Vue 3 in a Laravel 10 project. With Mohamed :)
</h1>
</template>
Edit the "web.php" File Inside the "routes" Folder
Let's create a route for our App.vue component.
<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('app');
})->name('application');
Now, let's run the project locally. Open your command line, navigate to your project directory:
Run Node Local Server
npm run dev
Run PHP Local Server
php artisan serve
After running php artisan serve, copy the link: https://127.0.0.1:8000/ and navigate to your Vue 3 and Laravel 10 project. That's it! Enjoy.
Desarrollador Full-stack | Dise?ador Gráfico | Analyst and Data Science
1 年Thank you so much! This article was immensely helpful in refreshing my Laravel knowledge. ??
UwU
1 年Love this
Senior Web Developer at JustAddWater
1 年Vite.config.js is not created each time using the command npm install @vitejs/plugin-vue
Passionate Web Developer | Turning Ideas into Reality
1 年I really liked the way you explained how to use the vite.config.js file. It was very clear and easy to follow.