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, formatting dates, calendars, and more.
vue-cal
vue-cal is an easy to use calendar component for Vue apps.
To use it, we install it by running:
npm i vue-cal
Then we can use it by writing:
<template>
<div>
<vue-cal hide-view-selector :time="false" active-view="month" xsmall></vue-cal>
</div>
</template>
<script>
import VueCal from "vue-cal";
import "vue-cal/dist/vuecal.css";
export default {
components: { VueCal }
};
</script>
We imported the CSS and registered the component.
Now we get a calendar displayed thanks to the vue-cal component.
x-small makes the calendar table small.
time indicates whether we display the time.
active-view sets the active view. month means we display the monthly calendar.
We can set the min and max dates.
The date range can be set:
<template>
<div>
<vue-cal
:min-date="minDate"
:max-date="maxDate"
hide-view-selector
:time="false"
active-view="month"
xsmall
></vue-cal>
</div>
</template>
<script>
import VueCal from "vue-cal";
import "vue-cal/dist/vuecal.css";
export default {
computed: {
minDate() {
return new Date().subtractDays(50);
},
maxDate() {
return new Date().addDays(50);
}
},
components: { VueCal }
};
</script>
It also supports localization.
vue-uid
vue-uid is a package that generates a unique ID in a Vue component
To install it, we run:
npm i vue-uid
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueUid from "vue-uid";
Vue.use(VueUid);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>{{$_uid}}</div>
</template>
<script>
export default {};
</script>
We just use the $_uid variable that’s available after registering the component to use it.
It can also be registered as a mixin within the component.
Vue2Editor
Vue2Editor is a rich text editor for Vue apps.
To use it, we can install it by running:
npm i vue2-editor
Then we can use it by writing:
<template>
<div id="app">
<vue-editor v-model="content"></vue-editor>
<div v-html="content"></div>
</div>
</template>
<script>
import { VueEditor } from "vue2-editor";
export default {
components: {
VueEditor
},
data() {
return {
content: "<h1>hello</h1>"
};
}
};
</script>
All we have to do is to use the vue-editor component.
It comes with common features like bold, italics, lists, underline, images, video inserting, adding links, etc.
v-model binds the HTML content that’s typed into the editor with content .
It emits various events that we can listen to.
Also, it supports many kinds of customizations.
@handsontable/vue
@handsontable/vue provides us basic spreadsheet features in our Vue app.
To use it, we write:
npm i @handsontable/vue `handsontable`
It’s a Vue version of handsontable , so it’s a required dependency.
Then we can use it by writing:
<template>
<hot-table :data="data" colHeaders="year" rowHeaders="fruit" width="600" height="300"></hot-table>
</template>
<script>
import { HotTable } from "@handsontable/vue";
export default {
data: function() {
return {
data: [
["", "apple", "orange", "grape", "banana"],
["2019", 10, 11, 12, 13],
["2020", 20, 11, 14, 13],
["2021", 30, 15, 12, 13]
]
};
},
components: {
HotTable
}
};
</script>
<style lang='scss'>
@import "~handsontable/dist/handsontable.full.css";
</style>
We have the data array to store the data.
hot-table is the component we use to display the data grid.
colHeaders have the column headers.
rowHeaders have the row headers.
We can also set the width and height.
Also, we imported the styles.
Now we have a grid that we can navigate like a spreadsheet.
A license key is required to use this package if we don’t want the license key missing message to show.
It’s free for non-commercial use.
It has many other spreadsheet features like filtering data, merging cells, autofill, and more.
vue-date-fns
vue-date-fns provide us with many filters for formatting dates.
To use it, we run:
npm i vue-date-fns
to install it.
Then we can use it bu writing:
<template>
<div>{{ new Date() | date }}</div>
</template>
<script>
import { dateFilter } from "vue-date-fns";
export default {
filters: {
date: dateFilter
}
};
</script>
We display the date with the date filter.
We can use the filters with this.$date in our components.
The locale can also be customized.
Conclusion
vue-date-fns provides us with Vue filters to format dates.
@handsontable/vue lets us add a spreadsheet to our Vue app.
vue-cal is a calendar component for Vue.
vue-uid lets us create unique IDs in our Vue components
Vue2Editor is a rich text editor with lots of features.
