In this Install Vue 3 in Laravel 9 with Vite tutorial we have explained steps to achieve that without running into any errors or missing out on important components as they are explained and here. Whereas, before starting over on this tutorial here is an overview of Vue 3, Laravel 9 and Vite basics.
Laravel 9.1 has been upgraded to Laravel 9.2.0. Now we need to use vite.config.js to replace the root webpack.mix.js compiler. So the devs can work with Vite instead of webpack powered Mix. We will use Vite in Laravel 9.2 for installing Vue 3 latest upgrades. We have used simple steps and the dependencies to install Vue 3 with Vite are very simple and Laravel 9.2.0 is the latest upgrade which we will use.
We are creating Vue 3 and Laravel 9.2.0 application with Vite where we will also create vue3 component and connect laravel 9 blade file to it. You should know that:
- Vue 3 is a very lightweight, framework and progressive to build awesome UI and simple to use. Vue 3 js is its latest upgrade and its getting immense attention.
- Laravel 9.2.0 is a very flexible PHP framework that helps web devs build and scale web apps according to the modern needs
- Vite 3 gives developers more room to use advance features as compared to Mix’s. Now we use vite.config.js instead of webpack.mix.js:
Method and steps to install Vue 3 in laravel 9 with Vite:
- Creating a New Laravel 9 Project
- Installing NPM Node Package Manager Dependency
- Installing Vue 3
- Installing Vitejs/plugin-vue-plugin
- Updating vite.config.js
- Starting Vite Dev Server
- Creating Vue 3 App
- Creating Vue 3 Component
- Connecting The Vue 3 Component to Laravel blade file
- Updating .env File
- Updating Laravel Routes
- Testing Our Project on Local server
#1 Create a New Laravel 9 Project
Create a new Laravel 9 project, this command:
composer create-project --prefer-dist laravel/laravel:^9.2 laravel9-vue3-viteUse this command if you global Laravel composer installed:
laravel new laravel9-vue3-vite#2 Install NPM Node Package Manage
Run the following command to install Node Package Manage dependencies:
npm install#3 Installing Vue 3
The next install Vue 3 in Laravel project using npm install. We will author Vue components in vue-loader webpack in Single-File Components.
npm install vue@next vue-loader@next#4 Installing Vitejs/plugin-vue-plugin
To install vue 3 or Vue in Laravel 9 we are installing vitejs/plugin-vue plugin. We will use this plugin to run our vuejs app on vite as it provides much needed dependencies for it. While vite runs on localhost:3000 and provides new features and it also wraps our code with Rollup.
npm i @vitejs/plugin-vue#5 Updating vite.config.js
When we open vite.config.js and copy paste the code we have mentioned below. The defineConfig is the first invoice from ite and now import laravel-vite-plugin. The plugins() will use the JS and CSS path and also create bundle for our app. We have to include vue() in our array of plugins. First of all these things we have open vite.config.js and copy paste it.
// 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/js/app.js',
]),
],
});#6 Starting Vite Dev Server
Now use the following command to start vite dev server that looks at our resources/js/app.js file and resources/css/app.css file. It starts vite server on http://localhost:3000. It runs in the background so we cannot access it through our browser as we use it for Vite hot reload and it keep account of our app assets such as CSS and JS.
npm run dev#7 Creating Vue 3 App
Now in resources/js/app we will create an instance of Vue 3. Then import {createApp} from ‘vue’ which you can see in the code snippet. It requires a parameter App that we passed and import App from /App.vue
// app.js
require('./bootstrap');
import {createApp} from 'vue'
import App from './App.vue'
createApp(App).mount("#app")#8 Creating Vue 3 Component
We will create a file ‘App.vue’ under the JS folder and add some text like “ Install Vue 3 in Laravel 9 with Vite – LaraMatic” which you can use however you want or change.
<template>
Install Vue 3 in Laravel 9 with Vite - LaraMatic
</template>#9 Connecting the Vue 3 Component to Laravel blade file
Now we need to open the resource/views directory, and create the app.blade.php file and add this piece of code to it. See the example here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Install Vue 3 in Laravel 9 with Vite</title>
@vite('resources/css/app.css')
</head>
<body>
<div id="app"></div>
@vite('resources/js/app.js')
</body>
</html>#10 Updating Laravel Routes
Next we will go to routes/web.php use vue.blade.php file name in place of welcome.blade.php and there we execute our vuejs code, See the example here for Laravel Routing:
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| We will register routes for our app here which get loaded
| by the RouteServiceProvider in a group that has
| the "web" middleware group.
|
*/
Route::get('/', function () {
return view('app');
});#11 Updating .env File
We need to go to our .env file to update APP_URL and set APP_URL=http://localhost:8000 which will change CSS and JS in the browser instantly after checking js and updating CSS to serve them. Use this code to update it.
APP_URL=http://localhost:8000#10 Testing Our Project on Local server
We will go to a new terminal window and run our dev server to test it. It will run our laravel 9 vue3 vite project on localhost 8000 that you can change if you have to. We need to run npm run dev server also to watch vuejs template changes and see how instantly it updates in our browser.
php artisan serveNow open http://localhost:8000/ to check our project install vue 3 in laravel 9 with vite in the local browser. Let us know in the comments if you run into any errors. We will appreciate your feedback.
