Konten [Tampil]
- npm install jquery select2
- npm install select2
- npm install jquery
1. Pertama, ubah file resources/js/app.js Anda seperti ini:
import './bootstrap';
import $ from 'jquery';
window.$ = window.jQuery = $;
import Select2 from 'select2';
Select2();
$(document).ready(function() {
$('.select2').select2();
});
2. Pastikan Anda telah mengimpor CSS Select2 di file resources/css/app.css atau resources/sass/app.scss
@import 'select2/dist/css/select2.css';
3. vite
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
resolve: {
alias: {
'$': 'jquery',
'jquery': 'jquery',
'select2': 'select2/dist/js/select2.full.js',
},
},
});
4. npm run dev
5. app.blade
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... kode lain ... -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<!-- ... kode lain ... -->
@vite(['resources/js/app.js'])
</body>
</html>
6. jquery di resources/js/app.js
import './bootstrap';
import $ from 'jquery';
window.$ = window.jQuery = $;
import Select2 from 'select2';
Select2();
document.addEventListener('DOMContentLoaded', (event) => {
$('.select2').select2();
});