How to Install and Configure Vue 3 Application in Laravel 10

In this tutorial, you are going to learn How To Install and Configure Vue 3 Application in Laravel 10 using Vite 3. You will get step by step guidance from scratch. At the end of this tutorial, you will be able to create and setup a basic Vue 3 application in laravel 10.

What is Vite?

Vite is a Next Generation Frontend Development Tool for Modern Web Applications that focuses on speed and performance by improving the development experience. Vite leverages new advancements in its ecosystem by using native browser ES import to enable support for modern browsers without a build process.

How to create and configure basic Vue 3 application in Laravel 10?

Follow the below mentioned steps to install and setup Vue 3 app in Laravel 10 with the help of Vite:

• Step 1: Install Fresh Laravel 10 Application
• Step 2: Install NPM Dependencies
• Step 3: Install Vue 3 and Vue Loader 3
• Step 4: Install vitejs/plugin-vue package
• Step 5: Setup vite.config.js
• Step 6: Create Vue 3 Component and setup resources/js/app.js
• Step 7: Connecting Vue 3 Component with Laravel blade file
• Step 8: Setup Laravel Routes
• Step 9: Setup APP_URL in Laravel .env file
• Step 10: Start Vite and Laravel Development Servers

Now, we will go through all the above steps one by one to achieve our goal.

Step 1: Install Fresh Laravel 10 Application

First of all, lets install a fresh laravel 10 application. Open your terminal and run the following command:

composer create-project laravel/laravel l10vue3vite3app

Step 2: Install NPM Dependencies

Next, lets install all the required node packages by using NPM. Run below command in the terminal to do so:

npm install

Step 3: Install Vue 3 and Vue Loader 3

Next, we need to install vue 3 and vue loader 3 for our application. 

What is Vue Loader?
Vue Loader is a loader for webpack that allows you to define Vue components in a format called Single-File Components. 

Run the following command in terminal to install vue and vue loader:

npm install vue@next vue-loader@next

Step 4: Install vitejs/plugin-vue package

Next, we have to install vitejs/plugin-vue package in our application. This package offers required dependencies to run vuejs application on vite. The vitejs/plugin-vue compiles the <template> blocks in SFCs. It also converts any encountered asset URLs into ESM imports.

Run the following command in terminal to install vitejs/plugin-vue:

npm install @vitejs/plugin-vue

Step 5: Setup vite.config.js

Next, we have to setup vite configuration. Open vite.config.js and copy below code in it:

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,
        }),
    ],
});

Step 6: Create Vue 3 Component and setup resources/js/app.js

Next, we need to create a file resources/js/components/App.vue and copy below code in it:

<template>
    <main>
        <div class="container text-center">
            <h1>How To Install and Configure Vue 3 App in Laravel 10 with Vite 3 - W3TechPoint</h1>
            <blockquote class="text-center h5">Hi friends, in this tutorial you have learnt that how to install and configure a basic Vue 3 application in Laravel 10 using Vite 3.<br>To learn more, please visit our <strong><a href="https://www.laravelclick.com/category/laravel">Recommended Laravel Tutorials</a></strong> and improvise yourself.</blockquote>
        </div>
    </main>
</template>

Next, we have to import resources/js/components/App.vue inside resources/js/app.js file as follows:

import './bootstrap';

import {createApp} from 'vue';

import App from './components/App.vue';

createApp(App).mount("#app");

Step 7: Connecting Vue 3 Component with Laravel blade file

Next, we have to connect our Vue 3 component with a laravel blade file. Under resources/views folder, create a blade file app.blade.php and copy below code in it:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How To Install and Configure Vue 3 Application in Laravel 10 using Vite 3</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    @vite('resources/css/app.css')
</head>
<body>
    <div id="app"></div>
    @vite('resources/js/app.js')
</body>
</html>

Step 8: Setup Laravel Routes

Next, we have to modify routes/web.php file as follows:

<?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 and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/

Route::get('/', function () {
    return view('app');
});

Step 9: Setup APP_URL in Laravel .env file

Next, we need to setup APP_URL in .env file as follows:

APP_URL=http://127.0.0.1:8000

Step 10: Start Vite and Laravel Development Servers

Welldone, now we have to start our development server to test our application.

Run below command in terminal to start vite development server:

npm run dev

Run below command in terminal to start laravel development server:

php artisan serve

Open below url in browser:

http://127.0.0.1:8000/