কিভাবে লারাভেল Vite এর সাথে লারাভেল UI প্যাকেজ ইনস্টল করবেন

কিছুদিন ধরে আমিসহ আরো অনেকে লারাভেলের নতুন ভার্সন লারাভেল ৯.১৯ এ ওয়েবপ্যাক(webpack) থেকে ভিইট(vite) এর আপডেট হওয়ায় লারাভেল এর UI package install করাতে সমস্যার সম্মুখীন হচ্ছে। আমি নিজেও এই সমস্যার সম্মুখীন হয়েছি আর অনেক সময় নিয়ে সমাধান করেছি তাই অনেক ভাই এ ইনবক্সে বলতেছিল কীভাবে করছি তাদের একটু সাহায্য করতাম তাই ভাবলাম ছোট একটা পোস্টের মাধ্যমের এই সমস্যাটার সমধান তুলে ধরি।

আসলে লারাভেল ৯.১৯ এ লারাভেল ওয়েবপ্যাক থেকে ভিইট এ পরিবর্তন হয়েছে। আসলে এটি ওয়েভ এপ্লিকেশনকে ডেভেলপ করতে আগের থেকে ওনেক গুন দ্রুত করছে। তাহলে চলুন আমরা জানা শুরু করি কীভাবে লারাভেল ভিইট এর মাধ্যমে লারাভেল ইউআই(UI) প্যাকেজটা ইনস্টল করব (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 

(সংগৃহীত)