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.