Sep 13, 2024 .
51
views
What are you looking for?
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.
Requirements:
npm i npm install vue@next vue-loader@next npm i @vitejs/plugin-vue
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', ]), ], });
Route::get('/', function () { return view('app'); });
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>
import { createApp } from 'vue'; import Home from './Pages/Home.vue' createApp(Home).mount("#app")
resources/js/Pages/Home.vue
<template> <h1> Laravel 9 vite with vue 3 </h1> </template>
npm run dev php artisan serve
By following all these steps you will be able to setup and use Vue in Laravel.