Cara menggunakan install bootstrap laravel

Bootstrap adalah framework Css paling populer di dunia dan Vue 3 adalah file yang cepat, berukuran kecil dan dilengkapi dengan dukungan TypeScript yang baik.

dalam tutorial ini saya akan menunjukkan cara menginstal booststrap 5 dan Vue.js 3 di Laravel.

Langkah 1: Buat Proyek Laravel

 laravel new Project_name

Langkah 2: Instal Laravel/UI

Laravel UI adalah perpustakaan resmi yang dilengkapi dengan komponen UI yang telah ditentukan sebelumnya.
Untuk menginstal Laravel/UI jalankan perintah:

 composer require laravel/ui

Langkah 3: Instal Bootstrap 5 di Laravel

Pada langkah ini, ikuti saya perintah pada urutan yang sama dan jangan lewatkan salah satu perintah yang tercantum di bawah ini.

 php artisan ui bootstrap

Anda mungkin memperhatikan bahwa perintah ini akan menginstal Bootstrap 4, alasan Anda harus menjalankannya adalah karena perintah ini akan mengatur banyak hal untuk Anda sehingga Anda tidak perlu melakukannya sendiri dibandingkan dengan menginstal bootstrap 5 secara langsung.

Sekarang kita akan mengganti versi Bootstrap ke Bootstrap 5 menggunakan perintah ini.

Perhatikan bahwa Anda harus menjalankan kedua perintah ini dengan urutan yang sama sehingga tidak akan mendapatkan masalah.

 npm install bootstrap@next @popperjs/core --save-dev npm install bootstrap @popperjs/core --save-dev

Selanjutnya, Anda hanya perlu:

 npm install npm run dev

jika Anda menindaklanjuti dengan saya, Anda akan berhasil menginstal Bootstrap 5 pada proyek Laravel Anda. Anda dapat memeriksa apakah versi Bootstrap diinstal pada proyek Anda pada file

 composer require laravel/ui

 "devDependencies": { "@popperjs/core": "^2.9.2", "axios": "^0.21", "bootstrap": "^5.0.1", "jquery": "^3.6", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "popper.js": "^1.16.1", "postcss": "^8.1.14", "resolve-url-loader": "^3.1.2", "sass": "^1.32.11", "sass-loader": "^11.0.1" }

Seperti yang Anda lihat, Bootstrap berhasil diinstal.

Langkah 4: Instal Vue 3 di Laravel

Seperti langkah sebelumnya kita akan menginstal Vue 2 menggunakan Laravel/UI karena akan menyiapkan banyak hal untuk kita.

Buat Anda yang penasaran gimana caranya install dan menggunakan bootstrap 4 di Laravel 7, mari kita mulai.

Pendahuluan

Framework Laravel sangat kaya dengan package dan library. Dukungan-dukungan yang besar membuat framework ini sangat digandrungi oleh programmer. Perusahaan IT maupun non IT, banyak yang beralih ke Laravel untuk membangun websitenya. dan salah satu kelebihannya adalah include bootstrap 4.

Bootstrap 4 ini bisa Anda gunakan untuk keperluan tampilan, maupun authentication.  Di versi 5.8, sistem authentication sudah menggunakan bootstrap. Namun sejak masuk ke Laravel 6, dan sekarang 7, Laravel lebih banyak pilihan lagi. Anda bisa menggunakan ReactJs di Laravel 7. atau bisa menggunakan VueJs di Laravel 7.

Tapi tunggu dulu, bila Anda ingin menginstall Bootstrap 4 untuk keperluan tampilan dan auth saya akan berikan contohnya.

Tools yang Perlu Disiapkan

Sebelum menginstall bootstrap 4 di Laravel 7, silahkan penuhi syarat tools yang diperlukan ini:

1. Framework Laravel 7
2. NodeJs

Pertama-tama, Anda perlu install framework Laravel 7 terlebih dahulu. 

Kedua, install NodeJs. di tahap install NodeJs, Anda juga bisa mengecek versi, buat contoh program dan lain-lain.

Kok NodeJs, Mas?

Iya. Sebab di Laravel 7, untuk menginstall Bootstrap, ReactJs maupun VueJs, dibutuhkan NodeJs. Laravel 6 dan 7 sudah memisahkan UInya. 

Bagian UI bisa diinstall secara terpisah. Kalau masih belum paham dengan NodeJs, jangan khawatir Anda bisa belajar NodeJs untuk pemula terlebih dahulu.

Cara Install Bootstrap 4 di Laravel 7

Jika semua tools yang diperlukan sudah siap, sekarang buka terminal Anda dan masuk ke direktori project. Ketik command di bawah ini:

composer require laravel/ui

Laravel 6 dan 7 telah memisahkan antara tampilan dengan framework Laravel.  Makanya perlu diinstall lagi Kemudian ketik command berikut untuk menginstall bootstrap 4:

php artisan ui bootstrap

dan jika Anda ingin menginstall auth menggunakan bootstrap 4 saja, silahkan ketik:

 php artisan ui bootstrap –auth

Udah, Mas? Belum.

Kan masih ada NodeJs nya. Makanya di awal perlu nginstall kalau belum.

Sekarang ketik lagi command berikut:

npm install

Apaan tuh, Mas?

Maksud npm itu merupakan Node Package Manajer. 

Jika kita ketik command npm install, maka kita akan mendapatkan folder node_modulus yang berisi package-package pendukung NodeJs.

Sudah? Dikit lagi.

Terakhir silahkan run npm dengan command berikut:

npm run dev

Selesai.

sumber : ilmukoding.com Artikel Asli telah terbit dan dapat diakses di https://ilmucoding.com/bootstrap-4-laravel/

Bagaimana cara install laravel via Composer?

Apa itu Bootstrap laravel?

Bagaimana cara mendownload bootstrap?

Langkah langkah membuat web dengan laravel?