Laravel • Jul 17th 2024

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

L earn 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.

How to Set Up Laravel 11 with Vue.js and Vite
Laravel 11 is a powerful PHP framework for building robust web applications, and Vue.js is a progressive JavaScript framework for building user interfaces. Combining Laravel with Vue.js can significantly enhance the development experience and application performance. In this tutorial, we'll show you how to set up Vue.js with Vite in a Laravel 11 project. By the end of this guide, you'll have a Laravel application with a working Vue.js frontend, ready to build modern, reactive web applications.~

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

0 Comments
Leave a Comment

Video

Categories

Tags