Halo teman-teman semuanya pada kesempatan kali ini kita akan belajar menginstall Framework Bootstrap, jQuery dan Popper.js di dalam project Vue Js kita.
Dengan menggunakan Bootstrap kita akan lebih mudah membuat sebuah desain layout atau tampilan sebuah website, karena di dalam Bootstrap kita sudah di sediakan css component yang siap untuk digunakan. Langsung saja kita mulai.
Langkah 1 - Install Bootstrap
Silahkan teman-teman jalankan perintah dibawah ini :
npm i bootstrap
Silahkan tunggu proses installasi Bootstrap sampai selesai, setelah selesai sekarang akan kita lanjutkan menginstall jQuery & Popper JS.
Langkah 2 - Install jQuery & Popper.js
Silahkan jalankan perintah di bawah ini untuk menginstall jQuery dan Popper.js di dalam project Vue Js kita.
npm i jquery popper.js
Silahkan ditunggu proses installasi sampai selesai, dan jika semuanya sudah selesai, sekarang kita akan mencoba menerapkan Bootstrap ini ke dalam project Vue JS kita.
Langkah 3 - Import Bootstrap, jQuery dan Popper.js
Sekarang kita akan import Bootstrap, jQuery dan Popper.js di dalam file main.js, silahkan buka file src/main.js kemudian tambahkan kode berikut ini :
//import bootstrap css & js
import 'bootstrap/dist/css/bootstrap.css'
import 'jquery/dist/jquery.min'
import 'popper.js/dist/popper.min'
import 'bootstrap/dist/js/bootstrap.min'
Setelah kita berhasil mengimport file-file di atas, maka sekarang kita sudah bisa memanggil class yang ada di dalam Bootstrap di dalam component-component Vue JS.
Jika file src/main.js di tulis secara lengkap, kurang lebih menjadi seperti beirkut ini :
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
//import bootstrap css & js
import 'bootstrap/dist/css/bootstrap.css'
import 'jquery/dist/jquery.min'
import 'popper.js/dist/popper.min'
import 'bootstrap/dist/js/bootstrap.min'
//import vue router
import VueRouter from 'vue-router'
Vue.use(VueRouter);
//import component
import PostIndex from './components/posts/Index'
import PostCreate from './components/posts/Create'
import PostEdit from './components/posts/Edit'
const router = new VueRouter({
routes: [{
path: '/',
name: 'posts',
component: PostIndex
},
{
path: '/create',
name: '/create',
component: PostCreate
},
{
path: '/edit/:id',
name: 'edit',
component: PostEdit
}
],
mode: 'history'
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
Sampai disini pembahasan tentang menginstall dan menginstegrasikan Bootstrap di Vue JS, di artikel selanjutnya kita semua akan belajar bagaimana cara menampilkan data dari Restful API yang sudah kita buat sebelumnya di CodeIgniter.
Source Code
CodeIgniter Restful API : https://github.com/SantriKoding-com/CodeIgniter4-Restful-API
Vue Js : https://github.com/SantriKoding-com/Vue-Js-CodeIgniter
Terima Kasih