Tutorial Vue JS & Restful API Lumen #5 : Integrasi Dengan Framework Bootstrap


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com
Tutorial Vue JS & Restful API Lumen #5 : Integrasi Dengan Framework Bootstrap

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


Fika Ridaul Maulayya
Full-Stack Developer, Content Creator and CO-Founder SantriKoding.com

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami