How to Install Laravel UI Package with Laravel Vite at laravel 9

For some time, many people including me have been facing problems installing Laravel's UI package. Due to the update of Vite from webpack to Laravel 9.19. I myself faced this problem and solved it. After a long time, so many brothers were telling me,how I am doing in this inbox, I would like to help them, so I thought to highlight this problem explain small post.

In fact Laravel 9.19 has changed from Laravel Webpack to Viet . It makes developing Web applications many times faster than before. So let's start knowing how to install Laravel UI package with Laravel Vite (How to install Laravel UI package with Laravel Vite)

Step 1:

Step 2: Install Laravel UI package for Bootstrap 

composer require laravel/ui 

Step 3: Setup Auth Scaffolding with Bootstrap  

php artisan ui bootstrap – auth 

Step 4: NPM Install 

npm install

Step 5: Edit Vite.config.js  

Paste this code & then remove resources/ css / app. css 

import { defineConfig } from 'vite'; 

import laravel from 'laravel-vite-plugin'; 

import path from 'path' 

export default defineConfig({ 

plugins: [ 

laravel([ 

'resources/js /app . js', 

]), 

], 

resolve: { 

alias: { 

'~bootstrap': path.resolve(__dirname,  

'node_modules/ bootstrap'), 

} 

}, 

}); 

Step 6: Update Bootstrap .js 

Open resources / js / bootstrap. js then select all code then remove them. Then add  this code: 

import loadash from 'lodash' 

window._ = loadash 

/** 

* We'll load the axios HTTP library which allows us to  easily issue requests

* to our Laravel back-end. This library automatically  handles sending the 

* CSRF token as a header based on the value of the  "XSRF" token cookie. 

*/ 

import axios from 'axios' 

window.axios = axios 

window.axios.defaults.headers.common['X-Requested-With']  = 'XMLHttpRequest'; 

/** 

* Echo exposes an expressive API for subscribing to  channels and listening. 

* for events that are broadcast by Laravel. Echo and  event broadcasting. 

* allows your team to easily build robust real-time web  applications. 

*/ 

// import Echo from 'laravel-echo'; 

// window.Pusher = require(' pusher- js'); 

// window.Echo = new Echo({ 

// broadcaster: 'pusher', 

// key: process.env.MIX_PUSHER_APP_KEY, // cluster: process.env.MIX_PUSHER_APP_CLUSTER, // forceTLS: true 

// });

Step 7: Import Bootstrap SCSS in JS folder 

Open resources/ js/ app. js then select all code then remove them. Then add this  code: 

import './ bootstrap'; 

import '../ sass /app.  scss' 

import * as bootstrap from 'bootstrap' 

Step 8: Replace Webpack mix() with @blade Directive 

Usually when we install Laravel fresh project it run it’s css and js with webpack. But  when we use Laravel @vite, we need to replace Laravel mix() with @blade. 

Open views/layouts/app. blade. php 

Here you can see two link: 

One for js file and another for css file. It is usable with Laravel mix() but it can not  work with Laravel @vite. Now remove both css and js link. 

Then use Laravel @vite directive: 

@vite([' resources/ js/ app.  js'])

Step 9: Run Vite command to build assets file 

npm run dev 

Step 10: Database Migration 

php artisan migrate 

Step 11: Run the server 

php artisan serve