Buefy is a UI framework that’s based on Bulma.
In this article, we’ll look at how to use Buefy in our Vue app.
Navbar
Buefy comes with a navbar component.
We can add it with the b-navbar component:
<template>
<div id="app">
<b-navbar>
<template slot="brand">
<b-navbar-item tag="router-link" :to="{ path: '/' }">
<img src="http://placekitten.com/100/100" alt="cat icon">
</b-navbar-item>
</template>
<template slot="start">
<b-navbar-item href="#">Home</b-navbar-item>
<b-navbar-dropdown label="Info">
<b-navbar-item href="#">About</b-navbar-item>
<b-navbar-item href="#">Contact</b-navbar-item>
</b-navbar-dropdown>
</template>
<template slot="end">
<b-navbar-item tag="div">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">Sign in</a>
</div>
</b-navbar-item>
</template>
</b-navbar>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We populate the brand slot with our logo.
start slot has the navbar items.
end slot has the buttons at the end of the navbar.
b-navbar-item has the navbar items.
Notification
We can show notifications with the b-notification component.
For example, we can write:
<template>
<section>
<button class="button block" @click="isActive = !isActive">Toggle</button>
<b-notification
v-model="isActive"
>Lorem ipsum dolor sit amet</b-notification>
</section>
</template>
<script>
export default {
data() {
return {
isActive: true
};
}
};
</script>
to add a toggle for the notification.
And we use v-model to bind to the open state of the notification.
We can set the type prop to set the background color of the notification:
<template>
<section>
<button class="button block" @click="isActive = !isActive">Toggle</button>
<b-notification v-model="isActive" type="is-success">Lorem ipsum dolor sit amet</b-notification>
</section>
</template>
<script>
export default {
data() {
return {
isActive: true
};
}
};
</script>
Also, we can add icons with the has-icon prop:
<template>
<section>
<button class="button block" @click="isActive = !isActive">Toggle</button>
<b-notification
v-model="isActive"
has-icon
icon="address-book"
icon-pack="fa"
>Lorem ipsum dolor sit amet</b-notification>
</section>
</template>
<script>
export default {
data() {
return {
isActive: true
};
}
};
</script>
The icon prop has the icon name.
icon-pack has the icon library name.
'fa' is Font Awesome.
We can add the CSS by adding:
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous"
/>
to the head tag of public/index.html .
We can set it to auto close with the auto-close and the duration props:
<template>
<section>
<button class="button block" @click="isActive = !isActive">Toggle</button>
<b-notification v-model="isActive" auto-close :duration="2000">Lorem ipsum dolor sit amet</b-notification>
</section>
</template>
<script>
export default {
data() {
return {
isActive: true
};
}
};
</script>
We set the duration so that it auto closes after a given number of milliseconds.
Also, we can open it programmatically with the this.$vuefy.notification.open method:
<template>
<section>
<button class="button block" @click="open">Toggle</button>
</section>
</template>
<script>
export default {
data() {
return {
isActive: true
};
},
methods: {
open() {
this.$buefy.notification.open("lorem ipsum");
}
}
};
</script>
The notification displays on the top right corner.
We can also pass in an object:
<template>
<section>
<button class="button block" @click="open">Toggle</button>
</section>
</template>
<script>
export default {
data() {
return {
isActive: true
};
},
methods: {
open() {
this.$buefy.notification.open({
duration: 5000,
message: `lorem <b>ipsum</b>`,
position: "is-bottom-right",
type: "is-danger",
hasIcon: false
});
}
}
};
</script>
message has the message.
position is the position.
type has the color style.
hasIcon lets us add an icon.
We can listen to the close event to do something when the notification closes:
<template>
<section>
<button class="button block" @click="open">Toggle</button>
</section>
</template>
<script>
export default {
data() {
return {
isActive: true
};
},
methods: {
open() {
const notif = this.$buefy.notification.open({
duration: 5000,
message: `lorem <b>ipsum</b>`,
position: "is-bottom-right",
type: "is-danger",
hasIcon: true
});
notif.$on("close", () => {
this.$buefy.notification.open("Custom notification closed!");
});
}
}
};
</script>
Conclusion
We can add navbars and notifications to our Vue app with Buefy.
