Tutorial Vue JS & Restful API Lumen #5 : Integrasi Dengan Framework Bootstrap - Halo teman - teman semuanya, pada tutorial kali ini kita semua akan belajar bagaimana cara menambahkan Bootstrap di Vue JS.
Bootstrap merupakan salah satu CSS Framework yang sangat populer sekali, Bootstrap membuat kita lebih cepat dalam membuat sebuah website.
Dan pada tahap kali ini kita semua akan mencoba menerapkan CSS yang ada di Bootstrap ke project Vue JS kita. 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
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 & Popper.js
Sekarang, silahkan teman-teman buka file main.js di dalam folder src dan ubah kodenya menjadi seperti berikut ini :
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
//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 components
import PostsIndex from './components/posts/Index'
import PostsCreate from './components/posts/Create'
import PostsEdit from './components/posts/Edit'
Vue.config.productionTip = false
const router = new VueRouter({
routes: [
{
path: '/',
name: 'posts',
component: PostsIndex
},
{
path: '/create',
name: 'create',
component: PostsCreate
},
{
path: '/edit/:id',
name: 'edit',
component: PostsEdit
}
],
mode: 'history'
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')
Dari penambahan kode di atas, bisa teman-teman lihat kita telah mengimport Bootstrap, Popper JS & jQuery. Kurang lebih seperti 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'
Sekarang teman-teman bisa memanggil class yang ada di dalam Bootstrap di dalam component-component Vu JS.
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 Lumen.
Terima Kasih