How to Install Vue 3 in Laravel 9 with Vite - TechvBlogs

How to Install Vue 3 in Laravel 9 with Vite

In this short blog, You will learn How to Install Vue 3 in Laravel 9 with Vite.


Suresh Ramani - Author - TechvBlogs
Suresh Ramani
 

1 year ago

TechvBlogs - Google News

Laravel has just released "laravel 9.19" with a major change. There is no more webpack.mix.js file in the laravel root in the place of the webpack.mix.js file vite.config.js file is introduced.

In this post, we will learn how to install Vue js 3 in laravel 9.19 with vite. This post shows you how to install vue 3 in laravel 9 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. Laravel 9.19 with vite is the latest version of the laravel framework at the writing of this article. As you know Laravel is the most popular PHP framework and it’s easy to use scale, and flexible. 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 9.19 application powered by vite. We’ll also learn how to create a vue3 component and connect it with laravel 9 blade file.

How To Install Vue 3 in Laravel 9 with Vite

Use the following steps to install Vue 3 in the laravel 9 application.

  • Install laravel 9 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 9 App

First, open Terminal and run the following command to create a fresh laravel project:

composer create-project --prefer-dist laravel/laravel:^9.0 laravel9-vue3-vite

or, if you have installed the Laravel Installer as a global composer dependency:

laravel new laravel9-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 9 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 9 with Vite - TechvBlogs" you can change it according to your requirement.

<template>
    How To Install Vue 3 in Laravel 9 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 9 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.

You can find the GitHub repository here suresh-ramani/laravel-vue3-vite.

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 linkServerAvatar 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.

Comments (13)

Hilal Ahmad Hilal Ahmad 6 months ago

Thanks a lot for creating such useful blog.

Zoltan Zoltan 9 months ago

Dear Suresh Ramani!

There is a post on your blog. Can the project be built with Laravel version 10?

I tried to create it, but during the new registration I get the following error message (Register.vue line 72):

POST http://127.0.0.1:8000/register 422 (Unprocessable content)

If you could possibly help the project to run under version 10 of Laravel.

I would be happy to invite you for a couple of coffees :)

Mande Paulo Mande Paulo 11 months ago

What if i want to add a plugin for vue like chartkick? I treid many differents ways and nothing resolved

adam adam 1 year ago

Hi, Nice tutorial, it works!

Thank you.

Do you have CRUD tutorial for laravel 9 with vue & vite?

Didier Didier 1 year ago

Nice tutorial , thanks for the time & efforts!

Any chance for an augmented version with Inertia and possibly vuetify 3, now that it is realised ?

MIchel MIchel 1 year ago

Thanks for this tutorial. I was looking for a starting point and this one worked perfectly.

Hans Hans 1 year ago

Hi, I had to change app.js with the following:

require('./bootrap');
import './bootstrap';

Now it works for me

ayoub ayoub 1 year ago

Thank you <3

Rejown Ahmed Rejown Ahmed 1 year ago

Thank You For this great tutorial. It helped me a lot

Hammad Zafar Hammad Zafar 1 year ago

Really Helpfull. Thanks

Subhe sadek Subhe sadek 1 year ago

Really helpful. I appreciate.

Luciano Luciano 1 year ago

hi. Do you have a github with the complete code of this tutorial???

Comment


Note: All Input Fields are required.