How to Install Laravel UI Package with Laravel Vite at laravel 9
- 22-Jul-2022 04:02PM
- Zahidul Islam
- 5969
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