Categories
Top Vue Packages

Top Vue Packages for Adding Text Editors, Animated Numbers, and Tag Input

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 how the best packages for adding text editors, animated numbers, and tag input.

@ckeditor/ckeditor5-vue

This package is the Vue version of CKEditor.

We can install it by running:

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import CKEditor from "@ckeditor/ckeditor5-vue";

Vue.use(CKEditor);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
  </div>
</template>

<script>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

export default {
  name: "app",
  data() {
    return {
      editor: ClassicEditor,
      editorData: "<p>Content of the editor.</p>",
      editorConfig: {}
    };
  }
};
</script>

The ckeditor component binds to the editorData , which contains HTML content.

By default, the editor has buttons for bold, italic, formatting, links, images, and lists.

We can add plugins as we wish.

This can be done bu building from source.

@braid/vue-formulate

@braid/vue-formulate is a package that lets us add form elements and validation to a form.

To install it, we run:

npm install @braid/vue-formulate

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueFormulate from "@braid/vue-formulate";

Vue.use(VueFormulate);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <FormulateInput type="text" v-model="name"/>
    <p>{{name}}</p>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      name: ""
    };
  }
};
</script>

We add an input by using the FormulateInput component.

v-model binds to the name state.

The type can be any type that a regular form input element takes like text and email .

We can add validation by writing:

<template>
  <div id="app">
    <FormulateInput type="email" v-model="email" validation="required|email"/>
    <p>{{email}}</p>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      email: ""
    };
  }
};
</script>

We just add the validation prop with the rules we want to include.

Now we see validation messages when we didn’t type in an email.

It also supports binding a model to multiple inputs.

We can have multiple inputs that bind to one value.

For example, we can write:

<template>
  <div id="app">
    <FormulateInput
      type="text"
      label="favorite fruit"
      validation="not:apple"
      validation-name="favorite fruit"
      error-behavior="live"
      v-model="fruit"
    />
    <FormulateInput
      type="radio"
      v-model="fruit"
      error-behavior="live"
      validation="in:apple,orange"
      :options="{ apple: 'Apple', orange: 'Orange' }"
    />
    <p>{{fruit}}</p>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      fruit: ""
    };
  }
};
</script>

There are many things that we can do with VueFormulate for building forms.

animated-number-vue

animated-number-vue is a Vue plugin that lets us add an animated number to a Vue app.

To use it, we install it by writing:

npm i animated-number-vue

Then we can use it by writing:

<template>
  <animated-number :value="price" :formatValue="formatToPrice" :duration="600"/>
</template>
<script>
import AnimatedNumber from "animated-number-vue";

export default {
  components: {
    AnimatedNumber
  },
  data() {
    return {
      price: 1000
    };
  },
  methods: {
    formatToPrice(value) {
      return `$${value.toFixed(2)}`;
    }
  }
};
</script>

We add the animated-number component to display the number by animating it into the screen.

The formatValue prop lets us format the number the way we like.

The duration is the length of the animation.

It also takes the updare ,run , begin , and complete props, which are all function valued.

They’re run during those phases of the animation.

@frk/vue-tags-input

@frk/vue-tags-input is an input component for letting us add tags.

To install it, we run:

npm i @frk/vue-tags-input

Then we can use it by writing:

<template>
  <div>
    <vue-tags-input v-model="value" :tags="tags" @tags-changed="newTags => tags = newTags"/>
    <p>{{tags}}</p>
  </div>
</template>

<script>
import VueTagsInput from "@frk/vue-tags-input";

export default {
  components: {
    VueTagsInput
  },
  data() {
    return {
      value: "",
      tags: []
    };
  }
};
</script>

We have the vue-tags-input component from the package.

v-model binds to the tag being entered.

tags has the tags entered.

The tags event is emitted, and we can use that to assign the entered tags to the value.

Conclusion

@ckeditor/ckeditor5-vue lets us add a rich text editor that’s customizable.

animated-number-vue lets us create a number display that are animated.

@frk/vue-tags-input is a useful tags input.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *