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.
Tag List
We add a list of tags with the b-taglist component.
To add it, we write:
<template>
<div id="app">
<b-taglist>
<b-tag type="is-info">First</b-tag>
<b-tag type="is-info">Second</b-tag>
<b-tag type="is-info">Third</b-tag>
</b-taglist>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We just put all the b-tag components inside.
The attached prop will attach 2 tags together:
<template>
<div id="app">
<b-taglist attached>
<b-tag type="is-dark">npm</b-tag>
<b-tag type="is-info">6</b-tag>
</b-taglist>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Also, we can combine fields to group attached tags:
<template>
<div id="app">
<b-field grouped group-multiline>
<div class="control">
<b-tag type="is-primary" attached closable>Technology</b-tag>
</div>
<div class="control">
<b-tag type="is-primary" attached closable>Vuejs</b-tag>
</div>
<div class="control">
<b-tag type="is-primary" attached closable>CSS</b-tag>
</div>
</b-field>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We put them all in the b-field component with the grouped and grouped-multiline props to group them together.
Sizes and Types
We can change the color with the type prop:
<template>
<div id="app">
<b-tag type="is-info">Technology</b-tag>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
And we can change the size with the size prop:
<template>
<div id="app">
<b-tag size="is-large">Technology</b-tag>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Toast
We can add toasts to display notifications.
For example, we can write:
<template>
<div id="app">
<button class="button is-medium" @click="toast">Launch toast</button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
toast() {
this.$buefy.toast.open("toast");
}
}
};
</script>
We called the this.$buefy.toast.open method to display a toast with the text in the argument.
Also, we can set the background color with the type property. message has the message.
We can also change the duration that it’s displayed and its position with the duration and position properties:
<template>
<div id="app">
<button class="button is-medium" @click="toast">Launch toast</button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
toast() {
this.$buefy.toast.open({
duration: 5000,
message: `Something's <b>not good</b>`,
position: "is-bottom",
type: "is-danger"
});
}
}
};
</script>
is-bottom places it at the bottom of the page.
Tooltip
Buefy comes with its own tooltip.
For example, we can write:
<template>
<div id="app">
<b-tooltip label="Tooltip right" position="is-right">
<button class="button is-dark">Right</button>
</b-tooltip>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
The b-tooltip component is wrapped around the trigger of the tooltip.
label has the tooltip text.
position has the position. It can be changed to other positions like is-left , is-bottom , etc.
We can add a delay with the delay prop:
<template>
<div id="app">
<b-tooltip label="Tooltip right" position="is-right" :delay="1000">
<button class="button is-dark">Right</button>
</b-tooltip>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Multilined Tooltip
The multilined prop makes it multilined:
<template>
<div id="app">
<b-tooltip label="Tooltip right" position="is-right" multilined>
<button class="button is-dark">Right</button>
</b-tooltip>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Conclusion
We can add tags and tooltips to our Vue app with Buefy.
