Top Vue Packages for Handling Local Storage, Adding Charts, Pagination, and Watching Visibility
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:21:23

---
title: Top Vue Packages for Handling Local Storage, Adding Charts, Pagination, and Watching Visibility
published: true
date: 2020-07-27 19:56:09 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/27/top-vue-packages-for-handling-local-storage-adding-charts-pagination-and-watching-visibility/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-handling-local-storage-adding-charts-pagination-and-watching-visibility
---

**Subscribe 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](https://thewebdev.info/2020/07/27/top-vue-packages-for-handling-local-storage-adding-charts-pagination-and-watching-visibility/) appeared first on [The Web Dev](https://thewebdev.info).