How to Set Up Laravel 11 with Vue.js and Vite

Learn how to install and configure Vue.js with Vite in a Laravel 11 project. This step-by-step guide will walk you through the process, including installing necessary packages, configuring Vite, setting up Vue components, and integrating Vue Router.

In Laravel, Install Vue.js Steps

Step 1: Install Vue loader optional

After setting up your Laravel project, run the following command to install Vue.js and the Vue loader:

npm install vue@latest vue-loader@latest

Step 2: Install Vue with Vite Plugin

To integrate Vue with Vite, install the Vite plugin for Vue:

npm install --save-dev @vitejs/plugin-vue

Step 3: Update `vite.config.js` File

Modify the vite.config.js file to configure Vite with the necessary plugins:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

Step 4: Update app.js

Update resources/js/app.js to import and create a Vue application:

import './bootstrap';
import { createApp } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

createApp(HelloWorld).mount('#app');

Step 5: Install Vue Router and Configure Routes

Install Vue Router and create a router configuration file:

  npm install vue-router@4

Create a router folder and add an index.js file with the following content:

import { createRouter, createWebHistory } from 'vue-router';
import HelloWorld from '../components/HelloWorld.vue';

const router = createRouter({
    history: createWebHistory(window.Laravel.appUrl),
    routes: [
        {
            path: '/',
            name: 'home',
            component: HelloWorld,
        },
     
    ],
});

export default router;

Step 6: Update app.js to Use the Router

If you haven't already imported the router, update resources/js/app.js:

import './bootstrap';
import { createApp } from 'vue';
import HelloWorld from './components/HelloWorld.vue';

import router from './router';

createApp(HelloWorld).use(router).mount('#app');

Step 7: Access Laravel App URL in Vue

To access the Laravel application URL in Vue, add the script and make welcome.blade file and add following code:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
    </head>
    <body class="bg-white font-family-karla">
        <div id="app"></div>
        <script>
            window.Laravel = {!! json_encode([
                'appUrl' => env('VITE_BASE_URL')
            ]) !!};
        </script>
          <!-- Top Bar Nav -->
          @vite(['resources/js/app.js'])
      </body>
</html>

Make A HelloWorld.vue file like below code and add style css


<template>
 <H2>{{ title }}</H2>

  </template>
  <script>
  export default {
    name: 'HomeView',
    data() {
      return {
        title: 'Welcome to Vue js app',
      }
    },

  }
  </script>

For test Run this below Command

npm run dev

By following these steps, you can successfully set up Vue.js with Vite in a Laravel 11 project. This integration allows you to build a modern, reactive frontend with Vue while leveraging Laravel's powerful backend capabilities. Happy coding!
Use here JWT

AmanKhalsa