Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In this article, we’ll look at the best packages for adding dialog boxes, select items from a tree, and display truncated text.
vue-thin-modal
vue-thin-modal is a simple modal component that we can use in our Vue app.
To use it, we run:
npm i vue-thin-modal
to install it.
Then we write:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueThinModal from "vue-thin-modal";
import "vue-thin-modal/dist/vue-thin-modal.css";
Vue.use(VueThinModal);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<button type="button" [@click](http://twitter.com/click "Twitter profile for @click")="open">Open Modal</button>
<modal name="hello">
<div class="basic-modal">
<h1 class="title">hello</h1>
<button class="button" type="button" @click="close">Close Modal</button>
</div>
</modal>
</div>
</template>
<script>
export default {
methods: {
open() {
this.$modal.push("hello");
},
close() {
this.$modal.pop();
}
}
};
</script>
We import the component and its CSS.
Then we display the modal with the modal component.
The content is in between the tags.
We call this.$modal.push to display it. The argument is the value of the name prop of the modal.
And we call this.$modal.pop to close it.
vue-clamp
vue-clamp is a simple directive for truncating text.
To use it, we run:
npm i vue-clamp
to install it.
Then we write:
<template>
<v-clamp autoresize :max-lines="1">{{ text }}</v-clamp>
</template>
<script>
import VClamp from "vue-clamp";
export default {
components: {
VClamp
},
data() {
return {
text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nibh neque, dignissim sit amet libero at, aliquet tempus urna. Aenean luctus accumsan feugiat. Nunc dui purus, imperdiet eu suscipit et, convallis vehicula nulla. Quisque nec nisi elementum, tincidunt est eu, sollicitudin enim. Sed fermentum massa urna, at malesuada leo egestas vitae. Aenean vulputate sem libero, nec sagittis arcu varius et. Donec et felis augue. Nunc euismod gravida nibh, id volutpat mauris placerat nec. Integer sit amet purus non ligula ullamcorper tempor in at massa. Donec pellentesque convallis pharetra.`
};
}
};
</script>
to truncate our text.
We use the v-clamp component with the autoresize prop to make it resize automatically.
max-line sets the max number of lines to display.
vue-tree-halower
vue-tree-halower is an input component where we can choose the value from a tree structure.
To use it, we can run:
npm i vue-tree-halower
to install it.
Then we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import { VTree, VSelectTree } from "vue-tree-halower";
import "vue-tree-halower/dist/halower-tree.min.css";
Vue.use(VTree);
Vue.use(VSelectTree);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<v-select-tree :data="treeData" v-model="selected"/>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
{
title: "fruit",
expanded: true,
children: [
{
title: "apple",
expanded: true,
children: [
{
title: "mcintosh"
},
{
title: "golden delicious"
}
]
},
{
title: "drink",
children: [
{
title: "<span style='color: red'>beer</span>"
},
{
title: "<span style='color: green'>wine</span>"
}
]
}
]
}
],
selected: []
};
}
};
</script>
We use the v-select-item component to add the component.
Then we set the data prop to tree data to populate the choices.
title is shown as the name of the node.
children are children of the node.
expanded indicates that the tree node is expanded if it’s true.
v-model binds to the select choices.
It includes many other choices or customizations.
Vuejs Dialog Plugin
Vuejs Dialog Plugin is a plugin that provides us with a promised based dialog box.
To use it, we run:
npm i vuejs-dialog
Then we use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VuejsDialog from "vuejs-dialog";
import "vuejs-dialog/dist/vuejs-dialog.min.css";
Vue.use(VuejsDialog);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div></div>
</template>
<script>
export default {
async mounted() {
const dialog = this.$dialog.alert("alert");
console.log("closed");
}
};
</script>
We import the plugin and styles.
Then we can call this.$dialog.alert to display the dialog.
Conclusion
vue-thin-modal lets us add a simple modal to our Vue app.
vue-clamp is a component that lets us display truncated text.
vue-tree-halower is a select input that lets us select items from a tree.
Vuejs Dialog Plugin is a promise based dialog plugin.
