Category: Top Vue Packages

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!

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 file upload inputs, virtual scrolling, text and array formatting, and more.

Vue File Agent

Vue File Agent is a fast file upload component that gives us preview capabilities.

It also includes drag and drop, validations, and upload progress support.

First, we install it by running:

npm i vue-file-agent

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueFileAgent from "vue-file-agent";
import VueFileAgentStyles from "vue-file-agent/dist/vue-file-agent.css";

Vue.use(VueFileAgent);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <VueFileAgent :uploadUrl="uploadUrl" v-model="fileRecords"></VueFileAgent>
    <p>{{fileRecords}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileRecords: [],
      uploadUrl: "https://example.com"
    };
  }
};
</script>

v-model is bound to the file object. uploadUrl is the URL to upload the file to.

Now we have the drag and drop file upload input displayed.

vue2-filters

vue2-filters provides us with various Vue filters that we can use in our Vue components.

To install it, we run:

npm i vue2-filters

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import Vue2Filters from "vue2-filters";

Vue.use(Vue2Filters);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>{{ msg | capitalize }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world"
    };
  }
};
</script>

We register the plugin and use the provided capitalize filter.

It capitalizes the first letter of each word.

There are also filters for upper case, lower case, placeholders, formatting numbers, and more.

There are also filters that take arguments.

For instance, we can use the number filter:

<template>
  <div>{{ 1234567 | number('0,0', { thousandsSeparator: ' ' }) }}</div>
</template>

<script>
export default {};
</script>

There are also filters we can use for organizing arrays.

For instance, we can write:

<template>
  <div>
    <ul>
      <li v-for="user in orderBy(users, 'name')" :key="user.name">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import Vue2Filters from "vue2-filters";

export default {
  mixins: [Vue2Filters.mixin],
  data() {
    return {
      users: [{ name: "james" }, { name: "alex" }, { name: "mary" }]
    };
  }
};
</script>

We add the mixins from the vue2-filters package so that we can use the orderBy filter.

Then we order by the name property of users .

There are other array filters to find items and more.

vue-axios

vue-axios is a package that lets us add the Axios HTTP client to our Vue app.

To install it, we run:

npm i vue-axios

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import axios from "axios";
import VueAxios from "vue-axios";

Vue.use(VueAxios, axios);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>{{data.name}}</div>
</template>

<script>
export default {
  data() {
    return {
      data: {}
    };
  },
  async mounted() {
    const { data } = await this.axios.get("https://api.agify.io/?name=michael");
    this.data = data;
  }
};
</script>

We registered the plugin so that we can use Axios by using the this.axios property.

Alternatively, we can use Vue.axios , or this.$http to use Axios.

vue-virtual-scroller

vue-virtual-scroller is a virtual scrolling plugin that we can use to create a virtual scrolling element in our Vue app.

To install it, we run:

npm i vue-virtual-scroller

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import { RecycleScroller } from "vue-virtual-scroller";

Vue.component("RecycleScroller", RecycleScroller);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <RecycleScroller class="scroller" :items="list" :item-size="32" key-field="id" v-slot="{ item }">
    <div>row {{item}}</div>
  </RecycleScroller>
</template>

<script>
export default {
  data() {
    return {
      list: Array(1000)
        .fill()
        .map((_, i) => i)
    };
  }
};
</script>

<style scoped>
.scroller {
  height: 100%;
}
</style>

We use the RecycleScroller to load things that are displayed on the screen.

This way, it’s much more efficient than loading everything at once.

Conclusion

vue2-filters provides us with a set of filters to format text and arrays.

Vue File Agent provides us with a file upload input.

vue-axios lets us use Axios in Vue easily

vue-virtual-scroller gives us a virtual scrolling box to load items to only when they are shown on the screen.

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 carousels, infinite scrolling, and dynamic templates.

vue-agile

vue-agile is an easy to use and customizable carousel for Vue app.s

To install it, we run:

npm i vue-agile

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueAgile from "vue-agile";

Vue.use(VueAgile);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <agile>
      <div class="slide">
        <h3>slide 1</h3>
      </div>

      <div class="slide">
        <h3>slide 2</h3>
      </div>
    </agile>
  </div>
</template>

<script>
export default {};
</script>

We register the plugin in main.js .

Then we use the agile component to add the carousel.

We add divs with the class slide to add slides.

We’ll see buttons to navigate between the slides.

It has many other options like timing, speed, throttling, initial slide, and more.

vue-infinite-scroll

vue-infinite-scroll is a Vue plugin that lets us add infinite scrolling to our app.

To install it, we can write:

npm i vue-infinite-scroll

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import infiniteScroll from "vue-infinite-scroll";
Vue.use(infiniteScroll);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
      <div v-for="n in num" :key="n">{{n}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 50,
      busy: false
    };
  },
  methods: {
    loadMore() {
      this.num += 50;
    }
  }
};
</script>

We registered the infiniteScroll plugin.

Then we add the v-infinite-scroll directive to enable infinite scrolling on the component.

Then div inside can be loaded with infinite scrolling.

infinite-scroll-disabled lets us disable infinite scrolling when data is loading.

infinite-scroll-distance is how much of the portion of the screen is left before we load more data in percentage points.

10 means we load more data when we have 10% of the screen left to scroll.

v-runtime-template

v-runtime-template lets us load Vue templates in our components.

Without this package, we can load HTML with v-html , but we can’t load anything with component tags, directives, or other Vue entities.

To install it, we run:

npm i v-runtime-template

Then we can write:

components/HelloWorld.vue

<template>
  <div class="hello">hello</div>
</template>

<script>
export default {
  name: "HelloWorld"
};
</script>

App.vue

<template>
  <div>
    <v-runtime-template :template="template"></v-runtime-template>
  </div>
</template>

<script>
import VRuntimeTemplate from "v-runtime-template";
import HelloWorld from "@/components/HelloWorld";

export default {
  data: () => ({
    template: `
      <hello-world></hello-world>
    `
  }),
  components: {
    VRuntimeTemplate,
    HelloWorld
  }
};
</script>

We use the v-runtime-template component with the template prop to set the template.

Also, we import the HelloWorld component so that we can include it in the template.

We can also pass in props as usual:

component/HelloWorld.vue :

<template>
  <div class="hello">hello {{name}}</div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: ["name"]
};
</script>

App.vue

<template>
  <div>
    <v-runtime-template :template="template"></v-runtime-template>
  </div>
</template>

<script>
import VRuntimeTemplate from "v-runtime-template";
import HelloWorld from "@/components/HelloWorld";

export default {
  data: () => ({
    template: `
      <hello-world name='world'></hello-world>
    `
  }),
  components: {
    VRuntimeTemplate,
    HelloWorld
  }
};
</script>

Vue Material Design Icon Components

We can use the Vue Material Design Icon Components package to add Material Design icons to our Vue app.

First, we install it by running:

npm i vue-material-design-icons

Then we can add the following to our component:

<template>
  <div>
    <menu-icon/>
  </div>
</template>

<script>
import MenuIcon from "vue-material-design-icons/Menu.vue";

export default {
  components: {
    MenuIcon
  }
};
</script>

We just import the icon and then register the component and use it.

Conclusion

vue-agile lets us add a carousel.

Vue Material Design Icon Components are a set of components with Material Design icons.

v-runtime-template lets us add dynamic templates that can have Vue code in it.

vue-infinite-scroll let us add infinite scrolling.

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 alerts, month picker, formatting dates, and displaying JSON.

vue-sweetalert2

vue-sweetalert2 is an easy to use package that lets us add popup alerts to our app.

To use it, first we install it by running:

npm i vue-sweetalert2

Then we can use it after we import the styles and register the plugin:

import Vue from "vue";
import App from "./App.vue";
import VueSweetalert2 from "vue-sweetalert2";

import "sweetalert2/dist/sweetalert2.min.css";

Vue.use(VueSweetalert2);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

Then we can use it in our component:

<template>
  <button @click="showAlert">click me</button>
</template>

<script>
export default {
  methods: {
    showAlert() {
      this.$swal("Hello world!");
    }
  }
};
</script>

vue-luxon

vue-luxon is a package that lets us parse dates and times and format them.

To use it, we install it by running:

npm i vue-luxon

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueLuxon from "vue-luxon";
Vue.use(VueLuxon);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>{{ '2020-01-01' | luxon }}</div>
</template>

<script>
export default {};
</script>

We registered the plugin from the vue-luxon package.

Then we can use the luxon filter to format a date string into a date.

We can change the format:

<template>
  <div>{{ '2020-01-01' | luxon:format('dd-MM-yy') }}</div>
</template>

<script>
export default {};
</script>

The locale can also be changed:

<template>
  <div>{{ '2020-01-01' | luxon:locale('long') }}</div>
</template>

<script>
export default {};
</script>

We can also display the difference between the given date and today:

<template>
  <div>{{ '2020-01-01' | luxon:diffForHumans }}</div>
</template>

<script>
export default {};
</script>

Other options include the time zone, server format, locale language, format, and more.

vue-autosuggest

vue-autosuggest is a useful autocomplete component that we can add to a Vue app.

To install it, we run:

npm i vue-autosuggest

Then we can use it by writing:

<template>
  <div>
    <vue-autosuggest
      :suggestions="[{data:['foo', 'bar', 'baz']}]"
      :input-props="{id:'suggest', placeholder:'pick a choice'}"
      @input="onInputChange"
      @selected="selectHandler"
      @click="clickHandler"
    >
      <template slot-scope="{suggestion}">
        <span class="my-suggestion-item">{{suggestion.item}}</span>
      </template>
    </vue-autosuggest>
  </div>
</template>

<script>
import { VueAutosuggest } from "vue-autosuggest";
export default {
  components: {
    VueAutosuggest
  },
  methods: {
    onInputChange() {},
    selectHandler() {},
    clickHandler() {}
  }
};
</script>

We can set the placeholder property to set the placeholder.

data has the data for the autosuggest.

Now we have an unsettled autocomplete dropdown that we can select a choice from. We can customize the dropdown with other slots.

before-input , after-input , before-suggestions , before-section , after-section , and after-suggestions lets us change how the input and suggestions are laid out.

vue-json-tree

vue-json-tree is a useful component for letting us display JSON data in our Vue app.

To use it, we run:

npm i vue-json-tree

Then we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import JsonTree from "vue-json-tree";
Vue.component("json-tree", JsonTree);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue :

<template>
  <div>
    <json-tree :raw="sample"></json-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sample: '{"foo": "bar"}'
    };
  },
  methods: {}
};
</script>

We just register the plugin and then use the json-tree component to display the JSON.

We can keep some levels collapsed with the level prop.

vue-monthly-picker

The vue-monthly-picker lets us add a month picker to our app.

To install it, we run:

npm i vue-monthly-picker moment

Moment is a dependency of vue-monthly-picker.

Then we can use it by writing:

<template>
  <div>
    <vue-monthly-picker v-model="month"></vue-monthly-picker>
    <p>{{month}}</p>
  </div>
</template>

<script>
import VueMonthlyPicker from "vue-monthly-picker";

export default {
  components: {
    VueMonthlyPicker
  },
  data() {
    return { month: 0 };
  }
};
</script>

Then we see a month picker in our app.

Conclusion

We can display alerts with vue-sweetalert2. vue-luxon lets us format date strings the way we like. The vue-json-tree package is useful for letting us render JSON. vue-monthly-picker is an easy to use month picker. Thanks for reading my article, I hope you found it helpful!

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 charts, filters, and more.

vue-chartjs

vue-chartjs is a great package for adding us add all kinds of chats.

To install it, we run:

npm i vue-chartjs chart.js

We can then use it by writing:

Chart.vue

<script>
import { Bar } from "vue-chartjs";

export default {
  extends: Bar,
  mounted() {
    this.renderChart({
      labels: [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
      ],
      datasets: [
        {
          label: "Votes",
          backgroundColor: "green",
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
    });
  }
};
</script>

App.vue

<template>
  <div>
    <Chart/>
  </div>
</template>

<script>
import Chart from "@/components/Chart";

export default {
  components: {
    Chart
  }
};
</script>

Our chart is in Chart.vue . There’s no template in the component. We just import the Bar component so that we can create a bar chart with our own data. datasets has the data that we want to display on the bars. labels has the chart labels at the bottom. this.renderChart renders the chart. In App.vue , we add the Chart component to display the chart. Alternatively, we can pass in props to our chart:

Chart.vue

<script>
import { Bar } from "vue-chartjs";

export default {
  extends: Bar,
  props: ["data", "options"],
  mounted() {
    this.renderChart(this.data, this.options);
  }
};
</script>

App.vue

<template>
  <div>
    <Chart :data="data"/>
  </div>
</template>

<script>
import Chart from "@/components/Chart";

export default {
  components: {
    Chart
  },
  data() {
    return {
      data: {
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ],
        datasets: [
          {
            label: "Votes",
            backgroundColor: "green",
            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
          }
        ]
      }
    };
  }
};
</script>

This is more flexible since our data comes from external sources like an API. We pass in the props for the data. It supports many other kinds of charts like line charts, pie charts, etc.

VueMorphling

The VueMorphling package has a collection of filters and directives that we can use to do various things.

To install it, we can run:

npm i vue-morphling

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import { VueMorphling } from "vue-morphling";

Vue.use(VueMorphling);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <p>{{ new Date(1990,2,20) | morph-age }}</p>
  </div>
</template>

<script>
export default {
  data() {}
};
</script>

We used the morph-age filter to display the age of the person given the date. We can use the morph-chop filter to cut off a part of a string.

For instance, we can write:

<template>
  <div>
    <p>{{ 'foo bar' | morph-chop(2) }}</p>
  </div>
</template>

<script>
export default {
  data() {}
};
</script>

We remove the last 2 characters of a string with morph-chop(2) . We can pass in 'start' to remove the first number of characters. And we can pass in 'end' to remove the last number of characters. Filters can also be used to templates, so we can write:

const msg **=** this.$morphChop('foo bar', 2);

To do the same thing we did in our template in our component code. It also has many other filters, including ones for currencies, dates, and more.

We can display JSON with the morph-json filter:

<template>
  <div>
    <pre>{{ obj | morph-json(2) }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        foo: { bar: 3 }
      }
    };
  }
};
</script>

2 means we have 2 spaces for indentation. It has to be used with the pre tag so we get the code formatting. It also comes with a few useful directives. We can use the v-morph-highlight directive to add highlighting to our text.

For instance, we can write:

<template>
  <div>
    <p v-morph-highlight="'dog::green'">Dogs are great. I love dogs.</p>
  </div>
</template>

<script>
export default {};
</script>

We highlight the word ‘dog’ no matter what case it starts with.

Conclusion

We can add charts to a Vue app with vue-chartjs. To display things our way, we can save some time with the vue-morphling package, which comes with various filters and directives. Thanks for reading my article, I hope you found it helpful!