Cara Benar Instal Bootstrap 5 dan Vue 3 di Laravel 8.

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 package.json

 "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.

 php artisan ui vue

Sekarang kita akan mengganti versi Vue ke Vue 3 menggunakan perintah ini:

 npm install --save vue@next && npm install --save-dev vue-loader@next

kemudian,

 npm install npm run dev

mari kita periksa package.json lagi.

 "devDependencies": { "@popperjs/core": "^2.9.2", "@vue/compiler-sfc": "^3.0.11", "axios": "^0.21", "bootstrap": "^4.6.0", "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", "vue": "^3.0.11", "vue-loader": "^16.2.0", "vue-template-compiler": "^2.6.12" }

Selamat! sekarang Anda telah menginstal Bootstrap 5 dan Vue 3 pada proyek Laravel Anda.

~Simodev

June 5, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *