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 through a small post.
this post first publish on Install Laravel UI Package with Laravel Vite
In fact Laravel 9.19 has changed from Laravel Webpack to Viet. In fact, it makes developing Wave 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.
for more any issue ar need help please Contact
Top comments (0)