Categories
Top Vue Packages

Top Vue Packages for Adding Charts, Counting Text, Creating UUID, and File Upload

Spread the love

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, counting text, creating UUIDs, and adding file upload.

Vue-ECharts

Vue-ECharts is an easy to use chart component for Vue apps.

To install it, we can run:

npm i vue-echarts echarts echarts-gl

echarts and echarts-gl are dependencies.

Then we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import ECharts from "vue-echarts";
import "echarts/lib/chart/bar";
import "echarts/lib/component/tooltip";
import "echarts-gl";

Vue.component("v-chart", ECharts);
Vue.config.productionTip = false;

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

App.vue

<template>
  <v-chart :options="polar"/>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'

export default {
  components: {
    'v-chart': ECharts
  },
  data () {
    const data = Array(10).fill().map((_, i)=> (i / 10)*Math.PI*180)

    return {
      polar: {
        title: {
          text: 'chart'
        },
        legend: {
          data: ['line']
        },
        polar: {
          center: ['50%', '54%']
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        angleAxis: {
          type: 'value',
          startAngle: 0
        },
        radiusAxis: {
          min: 0
        },
        series: [
          {
            coordinateSystem: 'polar',
            name: 'line',
            type: 'line',
            showSymbol: false,
            data
          }
        ],
        animationDuration: 2000
      }
    }
  }
}
</script>

We created a polar chart with some numerical values.

Then we use the v-chart component to display the chart.

We use polar coordinates and enable animation by setting animationDuration which is measured in milliseconds.

legend sets the legend and it’s displayed on top.

data has in theseries property has the data for the graph.

vue-upload-component

vue-upload-component is a useful upload component for Vue apps.

We can install it by running:

npm i vue-upload-component

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
const VueUploadComponent = require("vue-upload-component");
Vue.component("file-upload", VueUploadComponent);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <file-upload
      ref="upload"
      v-model="files"
      post-action="/post.method"
      put-action="/put.method"
      @input-file="inputFile"
      @input-filter="inputFilter"
    >
      Upload file
    </file-upload>
    <p>{{files}}</p>
  </div>
</template>

<script>

export default {
  methods: {
    inputFile(){},
    inputFilter(){}
  },
  data() {
    return {
      files: undefined
    }
  }
}
</script>

We use the file-upload component.

v-model binds to the files state.

post-action is the URL to submit the file.

put-action is the URL to submit the file.

input-file and input-filter are emitted by file-upload .

inpit-file is emitted when a file is selected.

vue2-touch-events

vue2-touch-events lets us detect touch events in Vue apps.

To install it, we run:

npm i vue2-touch-events

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import Vue2TouchEvents from "vue2-touch-events";

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

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

App.vue

<template>
  <div>
    <span v-touch:tap="touchHandler">Tap Me</span>
  </div>
</template>

<script>
export default {
  methods: {
    touchHandler() {
      console.log('tapped')
    }
  }
};
</script>

We use the v-touch directive to detect touches of the span.

The directive has many modifiers.

For instance, longtap detects long tap, swipe detects swipe, v-touch-options lets us set options with classes, swipe tolerance, and other things.

v-touch-class lets us set CSS classes for styling.

vue-uuid

Vue UUID lets us add a UUID to a Vue instance.

To install it, we run:

npm i vue-uuid

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import UUID from "vue-uuid";

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

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

App.vue

<template>
  <div>
    <div>{{ $uuid.v1() }}</div>
    <div>{{ $uuid.v4() }}</div>
  </div>
</template>

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

We used the built-in methods to generate UUIDs.

vue-countable

vue-countable will count various quantities in a string like the number of paragraphs, sentences, words, and everything together.

To use it, we run:

npm i vue-countable

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueCountable from "vue-countable";
Vue.component("vue-countable", VueCountable);

Vue.config.productionTip = false;

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

App.vue

<template>
  <div>
    <vue-countable :text="myText" :elementId="'id'" @change="change"></vue-countable>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myText: "foo"
    };
  },
  methods: {
    change(event) {
      console.log(event);
    }
  }
};
</script>

The vue-countable component will count the items.

It emits the change event when the text prop changes.

We set the text prop with the text we want to get the counts of.

Then event object has something like:

{
  all: 3,
  characters: 3,
  paragraphs: 1,
  sentences: 1,
  words: 1
}

Conclusion

Vue-ECharts lets us create charts. vue-upload-component lets us add file upload inputs without hassle. vue-countable counts quantities in strings automatically. vue-uuid generates UUID for us automatically.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.