Copied!
Laravel
How to Install Vue in Laravel using Vite Simple steps
Shahroz Javed
Aug 13, 2023 . 136 views

Table Of Contents

Introduction

Vite is a high-speed development tool used for bundling CSS and JavaScript files in Laravel applications. It seamlessly integrates with Laravel through an official plugin and Blade directive, facilitating easy loading of assets in both development and production environments.

Install Vue in Laravel using Vite:

Requirements:

01: create Laravel project

composer create-project --prefer-dist laravel/laravel LaravelReact

02: Install vue and vite vue-plugin

npm i
npm install vue@next vue-loader@next
npm i @vitejs/plugin-vue
          

03: Update 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',
      ]),
    ],
});
          

04: Create a route

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

05: Update Layout blade file

add vite directives and div with id app here is example

<!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 9 vite with vue</title>

</head>

<body>
    <div id="app"></div>
    @vite('resources/js/app.js')
</body>

</html>
          

06: Update resources/js/app.js

import { createApp } from 'vue';

import Home from './Pages/Home.vue'
createApp(Home).mount("#app")
          

07: Create new page

resources/js/Pages/Home.vue

<template>
<h1>
    Laravel 9 vite with vue 3
</h1>
</template>
          

08 Run following commands

npm run dev
php artisan serve
          

Conclusion:

By following all these steps you will be able to setup and use Vue in Laravel.

13 Shares

Related Posts

Similar Posts