Vue 3 setup with laravel 10 and vite - WebJourney

Vue 3 setup with laravel 10 and vite - WebJourney

In this tutorial we will learn how to setup vue 3 with laravel 10 and vite step by step and create vue components for test our laravel vue app. Let's learn about vue js.


What is Vue?


According to the documentation Vue  is a modern JavaScript Progressive Framework for building user interfaces. It's a front-end framework for building a Single Page Application (SPA). 


What is Vite?


Vite is a build tool and development server that is designed to make the development process of modern web applications faster and more efficient.

Vite is specifically optimized for building and bundling modern JavaScript applications, especially those that use the ES modules standard. It features a fast, in-memory development server that allows for quick hot module replacement (HMR) and fast page reloads, as well as lightning-fast builds for production deployments.


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


In this article, we will see how to install Vue js 3 in laravel10 latest version with vite. This article shows you how to install vue 3 in laravel 10 with the latest upgrades. If you are looking an example of installing vue 3 in laravel-vite then you are in the right article. We are using laravel 10 but it works for any laravel latest version start from laravel 9.19.


How to setup vue 3 with laravel 10 and vite


1. Install  laravel 10

2. Install NPM Dependencies

3. Install Vue 3

4. Install vitejs/plugin-vue plugin

5. Update vite.config.js

6. Compile the assets

7. Create Vue 3 App

8. Create Vue 3 Component

9. Connect Vue 3 Component with Laravel blade file.

10. Update Laravel Routes

11. Start The development Server


Step - 1. Install laravel 10 


Run the following artisan command to install your laravel app.

composer create-project laravel/laravel laravel-vue-setup


Step - 2. Install NPM Dependencies


For install all npm dependencies open your terminal go to your newly created laravel app and run the bellow command.

npm install


Step - 3. Install Vue 3


Now we have to install vue unsing the following npm command

npm install vue@next vue-loader@next


Step - 4. Install vitejs/plugin-vue plugin


Now install vue plugin

npm i @vitejs/plugin-vue


Step - 5: Update vite.config.js file


Update the file vite config file with the bellow code.


import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [


Step - 6. Compile the assets


Now we need to compile the assets app.css and app.js by the following command.

npm run dev


Step - 7. Create Vue 3 App


Update the app.js file like bellow.


import './bootstrap';

import { createApp } from 'vue'
// import the root component App from a single-file component.
import App from './App.vue'

const app = createApp(App)


Step - 8. Create Vue 3 Component


We need to create a vue component inside resources/js directory


<template> </template>

     <h2> Vue 3 setup with laravel 10 and vite - WebJourney </h2>

export default {
    name: "App.vue"

<style scoped>



Step - 9. Connect Vue 3 Component with Laravel blade file.


We we welcome.blade.php as a blade file. You can use any blade file. Now change the default code with the given bellow code.


<!DOCTYPE html>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Vue 3 setup with laravel 10 and vite - WebJourney</title>

	<div id="app"></div>


Step - 10. Update Laravel Routes


Update routes from web.php according to your needs.



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('welcome');


Step -11. Start The development Server


In the last step we need to run the artisan server with the bellow command.

php artisan serve


Open .env file set APP_URL= It will help vite to check the js and CSS updates and changes them in the browser instantly.

Now open the browser paste the link and hit enter.


Note: Keep in mind npm run dev command must running.


Hope this will help you a lot. Thank you for reading the post.



If you like what you are reading, please think about buying us a coffee as a token of appreciation.

Buy Me A Coffee

We appreciate your support and are committed to providing you useful and informative content.

We are thankful for your ongoing support.



You May Read Bellow Articles:

Laravel 9 live search data in a table using ajax

How to send SMS in laravel 9 using Twilio SMS API-Webjourney

Laravel 9 pdf invoice generate and download with barryvdh dompdf

How to create multi language website by laravel 9

Laravel image crud with radio, checkbox, email, date, text, number, color, select box

Laravel 10 multiple form validation on the same page-WebJourney



  • Share This:

Comments - 2

rownak jahan

Thanks. Work for me.

May 5, 2023


Most welcome. thanks to your never ending support.

May 7, 2023

rownak jahan

Nice Sir Thanks.

Jun 3, 2023