Categories
Top Vue Packages

Top Vue Packages for Truncating Text, and Display Dialogs and Modals

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.