John Au-YeungSubscribe to my email list now at http://jauyeung.net/subscribe/
Follow me on Twitter at https://twitter.com/AuMayeung
Many more articles at https://medium.com/@hohanga
Even more articles at http://thewebdev.info/
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 handling local storage, adding charts, pagination, and watching visibility of elements.
vue-ls
vue-ls is a library to lets us work with local storage with our Vue app.
To install it, we can run:
npm i vue-ls
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import Storage from "vue-ls";
const options = {
namespace: "vuejs__",
name: "ls",
storage: "local"
};
Vue.use(Storage, options);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app"></div>
</template>
<script>
export default {
mounted() {
this.$ls.set("foo", "bar", 60 * 60 * 1000);
}
};
</script>
namespace is the prefix for the key.
name is the property name for accessing the vue-ls library.
Since the name is 'ls' , we can use Vue.ls or this.$ls to access it.
Then we can save an item with this.$ls.set with the key, value, and expiry time to save the item.
To get it item, we write:
this.$ls.get('foo');
We don’t need the prefix.
Also, we can watch for changes in local storage.
For instance, we can write:
const callback = (val, oldVal, uri) => {
console.log('localStorage change', val);
}
this.$ls.on('foo', callback)
Then we can stop watching changes by writing:
this.$ls.off('foo', callback)
vue-observe-visibility
The vue-observe-visibility lets us watch for the visibility of an element.
To use it, we install it by running:
npm i vue-observe-visibility
Then we can use it by writing:
<template>
<div id="app">
<div v-observe-visibility="visibilityChanged" v-for="n in 100" :key="n">{{n}}</div>
</div>
</template>
<script>
export default {
methods: {
visibilityChanged(e) {
console.log(e);
}
}
};
</script>
We hook the visibilityChanged handler to the v-observer-visibility directive to watch for visibility of the divs.
We can throttle the watching and disable it.
So we can write:
<template>
<div id="app">
<div
v-observe-visibility="{
callback: visibilityChanged,
throttle: 300
}"
v-for="n in 100"
:key="n"
>{{n}}</div>
</div>
</template>
<script>
export default {
methods: {
visibilityChanged(e) {
console.log(e);
}
}
};
</script>
to do the throttling.
vuejs-paginate
vuejs-paginate is a pagination link component that we can use to do pagination.
To install it, we run:
npm i vuejs-paginate
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import Paginate from "vuejs-paginate";
Vue.component("paginate", Paginate);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<p>{{page}}</p>
<paginate
:page-count="20"
:click-handler="onClick"
:prev-text="'Prev'"
:next-text="'Next'"
:container-class="'container'"
></paginate>
</div>
</template>
<script>
export default {
data() {
return {
page: 0
};
},
methods: {
onClick(e) {
this.page = e;
}
}
};
</script>
We use the paginate component and then set the page-count property for the page count.
click-bandler is run when the links are clicked.
next-text is the next link text.
prev-text is the previous page link text.
container-class is the class for the container.
v-charts
v-charts is an easy to use chart library that’s based on echarts.
To install it, we run:
npm i v-charts echarts
We need echarts to use this library.
Then we can use it by writing:
<template>
<div>
<ve-line :data="chartData"></ve-line>
</div>
</template>
<script>
import VeLine from "v-charts/lib/line.common";
export default {
components: { VeLine },
data() {
return {
chartData: {
columns: ["date", "votes"],
rows: [
{ date: "02-01", votes: 1231 },
{ date: "02-02", votes: 1223 },
{ date: "02-03", votes: 2523 },
{ date: "02-04", votes: 4723 },
{ date: "02-05", votes: 3723 }
]
}
};
}
};
</script>
columns are the x and y-axis property names respectively.
rows have the property names we want to display as the value of the axes.
Conclusion
vue-ls lets us handle local storage functionality in Vue apps. vue-observe-visibility lets us watch observe the visibility of elements. vuejs-paginate is a useful pagination component. v-charts is an easy to use chart library. Thanks for reading my article, I hope you found it helpful!
The post Top Vue Packages for Handling Local Storage, Adding Charts, Pagination, and Watching Visibility appeared first on The Web Dev.
