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 timelines, text editors, animating numbers, and smooth reflow.
vue-cute-timeline
vue-cute-timeline is a timeline component that we can use with Vue apps.
To install it, we run:
npm i vue-cute-timeline
Then we can use it by writing:
<template>
<div id="app">
<timeline>
<timeline-title>title</timeline-title>
<timeline-item bg-color="#9dd8e0">foo</timeline-item>
<timeline-item :hollow="true">bar</timeline-item>
</timeline>
</div>
</template>
<script>
import { Timeline, TimelineItem, TimelineTitle } from "vue-cute-timeline";
export default {
components: {
Timeline,
TimelineItem,
TimelineTitle
}
};
</script>
We just import the timeline components.
Then we get a vertical timeline with the content between the tags.
bg-color has a background color.
hollow makes the dot hollow.
vue-ckeditor2
vue-ckeditor2 is a package that we can use to add swipe gesture components.
To use it, we run:
npm i npm i vue-ckeditor2-swiper
to install it.
Then we can use it by writing:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>codesandbox</title>
<script src="https://cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
</head>
<body>
<noscript>
<strong
>We're sorry but codesandbox doesn't work properly without JavaScript
enabled. Please enable it to continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue
<template>
<div>
<vue-ckeditor
v-model="content"
:config="config"
@blur="onBlur($event)"
@focus="onFocus($event)"
@contentDom="onContentDom($event)"
@dialogDefinition="onDialogDefinition($event)"
@fileUploadRequest="onFileUploadRequest($event)"
@fileUploadResponse="onFileUploadResponse($event)"
/>
</div>
</template>
<script>
import VueCkeditor from "vue-ckeditor2";
export default {
components: { VueCkeditor },
data() {
return {
content: "",
config: {
toolbar: [
["Bold", "Italic", "Underline", "Strike", "Subscript", "Superscript"]
],
height: 300
}
};
},
methods: {
onBlur(evt) {
console.log(evt);
},
onFocus(evt) {
console.log(evt);
},
onContentDom(evt) {
console.log(evt);
},
onDialogDefinition(evt) {
console.log(evt);
},
onFileUploadRequest(evt) {
console.log(evt);
},
onFileUploadResponse(evt) {
console.log(evt);
}
}
};
</script>
We add the CKEditor script in index.html so that we can use the package.
Then we put the vue-ckeditor component in our app.
v-model binds to the content that we enter.
We should see the bold, italics, and strikethrough buttons since we specified that in the toolbar property.
Vue Smooth Reflow (VSR)
Vue Smooth Reflow will add transitions to any reflows, including toggle on and off elements and manipulating lists.
To use it, we first install it by running:
npm i vue-smooth-reflow
Then we can use it by writing:
main.js
<template>
<div>
<div v-for="n in nums" :key="n">{{n}}</div>
</div>
</template>
<script>
import smoothReflow from "vue-smooth-reflow";
export default {
mixins: [smoothReflow],
data() {
return {
nums: []
};
},
mounted() {
this.$smoothReflow();
const timer = setInterval(() => {
if (this.nums.length === 10) {
clearInterval(timer);
}
this.nums.push(this.nums.length);
}, 500);
}
};
</script>
We register the mixin, and then we use the $smoothReflow method to enable smooth reflow.
Then we add a timer to add items to nums , which will be rendered with v-for .
We add an item every half a second.
Now the items will be animated with a transition effect when it’s added.
vue-animate-number
vue-animate-number is a useful package for letting us animate numbers.
To use it, we install the package by writing:
npm i vue-animate-number
Then we use the package by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueAnimateNumber from "vue-animate-number";
Vue.use(VueAnimateNumber);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<animate-number from="1" to="10" duration="1000" easing="easeOutQuad" :formatter="formatter"></animate-number>
</div>
</template>
<script>
export default {
methods: {
formatter(num) {
return num.toFixed(2);
},
startAnimate() {
this.$refs.myNum.start();
}
}
};
</script>
We add the animate-number component.
from is the starting number for the animation.
to is the ending number for the animation.
duration is the length of the animation in milliseconds.
easing lets us animate in a nonlinear fashion.
formatter is the formatter function for the number. Every value will go through the function before it’s displayed.
Conclusion
vue-cute-timeline lets us add a vertical timeline to our Vue app.
vue-ckeditor2 lets us add a text editor to our app.
Vue Smooth Reflow (VSR) adds transition effects for reflows.
vue-animate-number allows us to animate number displays.
