Introduction
In the ever-evolving landscape of web development, staying ahead of the curve is essential. For those who have been closely following the trends, you've probably heard of Vue 3 and its exciting features, which bring a breath of fresh air to the world of frontend development. Laravel, on the other hand, remains a popular choice for building robust and efficient web applications on the server side.
But what if we told you there's a way to harness the power of Vue 3 within the Laravel 10 ecosystem, combining the strengths of both technologies to create a seamless and responsive web application? That's precisely what this article is all about.
In this comprehensive guide, we will walk you through the process of integrating Vue 3 with Laravel 10, all while leveraging the lightning-fast Vite build tool. By the end of this tutorial, you'll have a clear understanding of how to set up this powerful development environment and start building modern, interactive, and efficient web applications that'll delight your users.
Why Choose Laravel with Vue.js for Web Development
When it comes to web development, selecting the right technologies can have a profound impact on the success of your project. Two of the most prominent and compatible technologies that have gained immense popularity in recent years are Laravel and Vue.js. Combining these two powerhouses can result in a robust and dynamic web development experience. In this article, we'll explore the key reasons why using Laravel with Vue.js is a winning combination.
1. Seamless Integration:
Laravel, a PHP web application framework, and Vue.js, a JavaScript framework for building user interfaces, are designed to work together harmoniously. Laravel provides a solid backend foundation, while Vue.js excels in creating interactive and responsive frontends. The integration between these technologies is smooth, allowing for efficient data communication between the frontend and the backend.
2. Modern and Maintainable Code:
Both Laravel and Vue.js promote best practices in coding. Laravel follows the MVC (Model-View-Controller) pattern, which encourages developers to write clean and organized code. Vue.js, with its component-based architecture, allows for modular, reusable, and maintainable frontend code. This combination simplifies development, debugging, and future updates.
3. Enhanced User Experience:
Vue.js is known for its fast rendering capabilities, thanks to its virtual DOM and efficient reactivity system. This results in a smoother and more responsive user interface. By integrating Vue.js into Laravel, you can create dynamic, real-time features without compromising on performance. Users will appreciate the improved experience, such as instant updates and seamless interactivity.
4. Productivity and Speed:
Laravel provides developers with an excellent set of tools and features, including the Artisan command-line interface, Eloquent ORM, and authentication scaffolding. These features boost developer productivity and reduce development time significantly. Vue.js, with its straightforward syntax and comprehensive documentation, simplifies frontend development, further accelerating the development process.
5. Rich Ecosystem:
Both Laravel and Vue.js have thriving communities and ecosystems. Laravel offers a wide range of packages, libraries, and extensions that can be easily integrated into your project. Vue.js, similarly, has a multitude of plugins and extensions available, ensuring you can find solutions to common development challenges.
6. Scalability and Flexibility:
Web applications built with Laravel and Vue.js are highly scalable and flexible. Laravel's architecture allows for easy expansion and modification of the backend, while Vue.js's component-based structure simplifies the addition of new features to the frontend. This adaptability is vital for accommodating the evolving needs of your project.
In this post, we will learn how to install Vue js 3 in Laravel 10 with Vite. This post shows you how to install Vue 3 in Laravel 10 with the latest upgrades. If you want to see an example of installing vue 3 in Laravel vite then you are in the right place. Vue js is a progressive framework for building user interfaces and it is lightweight and easy to use and learn. Vue 3 is the latest version of the Vuejs Framework and growing rapidly.
By the end of this post, you’ll be able to create a Vue 3 and Laravel 10 application powered by Vite. We’ll also learn how to create a vue3 component and connect it with Laravel 10 blade file.
How To Install Vue 3 in Laravel 10 with Vite
Use the following steps to install Vue 3 in the laravel 10 application.
- Install laravel 10 App
- Install NPM Dependencies
- Install Vue 3
- Update vite.config.js
- Compile the assets
- Create Vue 3 App
- Create Vue 3 Component
- Connect Vue 3 Component with Laravel blade file and use vite directive to add assets.
- Update Laravel Routes
- Start The Local Server
1. Install laravel 10 App
First, open Terminal and run the following command to create a fresh Laravel project:
composer create-project --prefer-dist laravel/laravel:^10.0 laravel10-vue3-vite
or, if you have installed the Laravel Installer as a global composer dependency:
laravel new laravel10-vue3-vite
2. Install NPM Dependencies
Run the following command to install frontend dependencies:
npm install
Step 3: Install Vue 3
Now after installing node modules we need to install vue 3 in our application, for that execute the following command in the terminal npm install vue@next vue-loader@next. vue-loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components. vue-loader@next is a loader that is for webpack to author Vue components in single-file components called SFCs.
npm install vue@next vue-loader@next
Step 4: Install vitejs/plugin-vue plugin
In laravel 10 latest release install vitejs/plugin-vue plugin for installing vue3 or vue in laravel. This plugin provides required dependencies to run the vuejs application on vite. Vite is a build command that bundles your code with Rollup and runs of localhost:3000 port to give hot refresh feature.
npm i @vitejs/plugin-vue
Step 4: Update vite.config.js file
Vite is a module bundler for modern JavaScript applications. Open vite.config.js and copy-paste the following code. First invoice defineConfig from vite at the top of the file and also import laravel-vite-plugin. Here plugins() take the path of the js and CSS file and create bundles for your application. you need to add vue() in the plugins array.
// 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([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});
Step 4: Vite Dev Server Start
Now after installing the vue 3, we need to start the dev server for vite for that run the following command and it will watch your resources/js/app.js file and resources/css/app.css file. It also starts a vite server on http://localhost:3000. you can not open it in the browser as it is for vite hot reload and it runs in the background and watches the assets of your application like js and CSS.
npm run dev
Step 5: Create Vue 3 App
In resources/js/app.js create an instance of the vue 3 firstly you import { createApp } from 'vue' and createApp It takes a parameter here we have passed App. Before that, you can create a vue file which is the main file responsible for the vuejs content name is App.vue.
// app.js
require('./bootstrap');
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount("#app")
Step 6: Create Vue 3 Component
Under the js folder create a file name 'App.vue' and write content for this example let’s write simple "How To Install Vue 3 in Laravel 10 with Vite - TechvBlogs" you can change it according to your requirement.
<template>
How To Install Vue 3 in Laravel 10 with Vite - TechvBlogs
</template>
Step 7: Connect Vue 3 Component with Laravel blade file
In this step, go-to resource / views directory, create the app.blade.php file, and add the following code to app.blade.php as follow:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>How To Install Vue 3 in Laravel 10 with Vite</title>
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>
Step 8: Update Laravel Routes
Open routes/web.php and replace welcome.blade.php with vue.blade.php file to load the vue.blade.php file where our vuejs code will execute.
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return view('app');
});
Step 9: Update .env file
Open .env file and update APP_URL and set APP_URL=http://localhost:8000. It will help vite to check the js and CSS updates and changes them in the browser instantly.
APP_URL=http://localhost:8000
Step 10: Start the Local server
Now open a new terminal and execute the following command from your terminal to run the development server. It runs the project on localhost 8000 port by default but you can change it also. Run npm run dev server also so that site will watch the changes in the vuejs templates and will update automatically to the browser. if you are running another project on the same port number.
php artisan serve
and navigate to the following link http://localhost:8000/
Thank you for reading this blog.
Read Also: Moving A Laravel Webpack Project To Vite
If you want to manage your VPS / VM Server without touching the command line go and Checkout this link. ServerAvatar allows you to quickly set up WordPress or Custom PHP websites on VPS / VM in a matter of minutes. You can host multiple websites on a single VPS / VM, configure SSL certificates, and monitor the health of your server without ever touching the command line interface.
If you have any queries or doubts about this topic please feel free to contact us. We will try to reach you.
