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

Zahidul Islam — Wed, 24 Aug 2022 16:50:33 +0000

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

DEV Community: Zahidul Islam

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

this post first publish on Install Laravel UI Package with Laravel Vite