Categories
Top Vue Packages

Top Vue Packages for Animating Numbers, Handling Clicks, Edit Markdown, and More

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 animating numbers, handling clicks outside an element, adding a Markdown editor, and a customizable dropdown.

vue-countup-v2

vue-countup-v2 lets us add a display for animating numbers.

To use it, we install it by running:

npm install --save countup.js vue-countup-v2

We’ve to add countup.js to use vue-countup-v2.

Then we can use it by writing:

<template>
  <div id="app">
    <ICountUp :delay="delay" :endVal="endVal" :options="options" @ready="onReady"/>
  </div>
</template>

<script>
import ICountUp from "vue-countup-v2";
export default {
  components: {
    ICountUp
  },
  data() {
    return {
      delay: 1000,
      endVal: 45373,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      }
    };
  },
  methods: {
    onReady(instance, CountUp) {
      const that = this;
      instance.update(that.endVal + 100);
    }
  }
};
</script>

We can set many options.

We set the endVal to set the end value to animate.

delay is the delay for the animation.

useEasing lets us animate in a nonlinear fashion.

useGrouping groups the digits.

decimal is the decimal digits separator.

prefix and suffix are prefixes and suffixes that are added to the number.

Vue-SimpleMDE

Vue-SimpleMDE is a simple Markdown editor component for Vue apps.

To use it, we first install it by running:

npm i vue-simplemde

Then we can use it by writing:

<template>
  <vue-simplemde v-model="content" ref="markdownEditor"/>
</template>

<script>
import VueSimplemde from "vue-simplemde";
import "simplemde/dist/simplemde.min.css";

export default {
  components: {
    VueSimplemde
  },
  data() {
    return {
      content: ""
    };
  }
};
</script>

We just add the vue-simplemde component to our app.

Also, we imported the CSS for the package.

The inputted value is bound to the content with the v-model .

vue-search-select

vue-search-select provides us with a dropdown that’s customizable.

To use it, we run:

npm i vue-search-select

to install it.

Then we can use it by writing:

<template>
  <model-select :options="options" v-model="item" placeholder="select item"></model-select>
</template>

<script>
import { ModelSelect } from "vue-search-select";
import "vue-search-select/dist/VueSearchSelect.css";

export default {
  data() {
    return {
      options: [
        { value: "1", text: "foo" },
        { value: "2", text: "bar" },
        { value: "3", text: "baz" }
      ],
      item: {
        value: "",
        text: ""
      }
    };
  },
  components: {
    ModelSelect
  }
};
</script>

We use the model-select component.

The options prop sets the dropdown options.

v-model binds the item to the item .

vue-tel-input

vue-tel-input lets us ad a telephone number to our Vue app.

To use it, we install it by running:

npm i vue-tel-input

Then we can use it by writing:

<template>
  <div>
    <vue-tel-input v-model="phone"></vue-tel-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: ""
    };
  }
};
</script>

We see a dropdown with the list of country prefixes for the phone numbers.

And we can type what we want into the vue-tel-input component.

v-model lets us bind the input value to the phone state.

vue-on-click-outside

vue-on-click-outside is a Vue directive that lets us call a method whenever a click is triggered outside the element.

To install it, we run:

npm i vue-on-click-outside

Then we can use it by writing:

<template>
  <div>
    <button type="button" @click="open">open</button>
    <div v-if="showPopover" v-on-click-outside="close">
      <span>hello</span>
    </div>
  </div>
</template>

<script>
import { mixin as onClickOutside } from "vue-on-click-outside";
export default {
  mixins: [onClickOutside],
  data() {
    return { showPopover: false };
  },
  methods: {
    open() {
      this.showPopover = true;
    },
    close() {
      this.showPopover = false;
    }
  }
};
</script>

We have a button to open a popup.

The popup has the v-on-click-outside directive to close it when we click outside the popup.

The closing is done by calling the close method.

Conclusion

vue-countup-v2 lets us animate numbers.

Vue-SimpleMDE lets us add a Markdown editor to our Vue app.

vue-tel-input is a useful telephone input.

vue-on-click-outside lets us handle clicks outside an element.

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.