Hallo apa kabar semua, semoga kalian sehat semua nya. Oke kali ini saya akan berbagi sedikit ilmu tentang cara Membuat Menu Navbar Vue Js dengan Boostrap yang baru saja pelajari. Sengaja saya post itu buat backup data .
Daftar Isi
Kita akan mengedit dan membuat file baru diantaranya :
- Membuat file Navbar.vue dan save pada folder components
- Import boostrap
- Membuat halaman Daftar Menu.
Membuat file Navbar.vue
Pertama kita akan membuat file Navbar.vue pada folder components. Langsung saja buka link yang sudah saya siapkan biar tidak ribet lagi, “https://getbootstrap.com/docs/4.5/components/navbar/ “
Copy saja semuanya, gampang tar kita hapus yang tidak perlunya.
Script navbar yang sudah saya siapkan tinggal pake saja bisa tapi masih mentah yah .
[html]
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#"><strong>Seafood</strong></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<router-link class="nav-link" to="/">Home</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/menu">Menu</router-link>
</li>
</ul>
</div>
</div>
</nav>
</template>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%0Aexport%20default%20%7B%0A%0Aname%3A%20%22Navbar%22%0A%0A%7D%3B%0A%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
[/html]
Import boostrap
Buka link https://bootstrap-vue.org/docs atau copy script di bawah ini
[html]
import { BootstrapVue, BootstrapVueIcons } from ‘bootstrap-vue’
import ‘bootstrap/dist/css/bootstrap.css’
import ‘bootstrap-vue/dist/bootstrap-vue.css’
Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)
[/html]
Kemudian script BootstrapVue paste kan ke file main.js ini script lengkapnya.
[html]
import Vue from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’
import { BootstrapVue, BootstrapVueIcons } from ‘bootstrap-vue’
import ‘bootstrap/dist/css/bootstrap.css’
import ‘bootstrap-vue/dist/bootstrap-vue.css’
Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount(‘#app’)
[/html]
Setelah itu save yah. Dan coba lihat hasilnya, jangan lupa di reload.
Membuat halaman Daftar Menu
Buat file baru dengan nama fiel Menu.vue di dalam folder views, kemudian copykan script di bawah ini.
Script lengkap Menu.vue
[html]
<template>
<div>
<Navbar />
<h1>Daftar Menu </h1>
</div>
</template>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%0A%2F%2F%20%40%20is%20an%20alias%20to%20%2Fsrc%0A%0Aimport%20Navbar%20from%20’%40%2Fcomponents%2FNavbar.vue’%0A%0A%0A%0Aexport%20default%20%7B%0A%0Aname%3A%20’Menu’%2C%0A%0Acomponents%3A%20%7B%0A%0ANavbar%0A%0A%7D%0A%0A%7D%0A%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%0A%0A%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
[/html]
Setalah itu kita akan daftar ke router agar file Menu.vue ini bisa tampil, buka file index.js yang berada dalam folder router, kemudian pastekan scrip di bawah ini.
[html]
import Menu from ‘../views/Menu.vue’
{
path: ‘/Menu’,
name: ‘Menu’,
component: Menu
},
[/html]
Ini script lengkapnya index.js
[html]
import Vue from ‘vue’
import VueRouter, { RouteConfig } from ‘vue-router’
import Home from ‘../views/Home.vue’
import Menu from ‘../views/Menu.vue’
Vue.use(VueRouter)
const routes: Array<RouteConfig> = [
{
path: ‘/’,
name: ‘Home’,
component: Home
},
{
path: ‘/Menu’,
name: ‘Menu’,
component: Menu
},
{
path: ‘/about’,
name: ‘About’,
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ ‘../views/About.vue’)
}
]
const router = new VueRouter({
mode: ‘history’,
base: process.env.BASE_URL,
routes
})
export default router
[/html]
Cupuk mudah bukan membuat menu navbar Vue Js dengan Boostrap ini semoga bermanfaat bagi anda yang membutuhkan, dan mohon maaf bila ada kesalah dalam penulusan karena kesempurnaan hanya milik Allah SWT.
Oh iya jangan sungkan-sungkan juga untuk bertanya jika ada hal yang kurang di pahami. Insya allah akan saya jawab sesuai dengan kemampuna saya.
This is something New !
Best view i have ever seen !