Categories
Top Vue Packages

Top Vue Packages for Adding Tabs, Popovers, Charts, and Display Code with

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 the best packages for adding tabs, popovers, charts, and display code with syntax highlighting.

vue-tabs-component

vue-tabs-component is a component that lets us add tabs to our Vue app.

To use it, we run:

npm i vue-tabs-component

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import { Tabs, Tab } from "vue-tabs-component";

Vue.component("tabs", Tabs);
Vue.component("tab", Tab);
Vue.config.productionTip = false;

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

App.vue

<template>
  <div id="app">
    <tabs :options="{ useUrlFragment: false }" @clicked="tabClicked" @changed="tabChanged">
      <tab name="First tab">tab 1</tab>
      <tab name="Second tab">tab 2</tab>
      <tab name="Disabled tab" :is-disabled="true">disabled</tab>
      <tab name="Custom fragment">fragment</tab>
    </tabs>
  </div>
</template>

<script>
export default {
  methods: {
    tabClicked(e) {
      console.log(e);
    },
    tabChanged(e) {
      console.log(e);
    }
  }
};
</script>

We used the tab and tabs components to add the tabs. The name prop is displayed as the link names. And the content between the tab tags is the tab content.

vue-prism-component

vue-prism-component is a component to let us display code with syntax highlighting.

To use it, we run:

npm i vue-prism-component prismjs

to install the packages.

Prism is a required dependency since the component uses it.

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import "prismjs";
import "prismjs/themes/prism.css";
Vue.config.productionTip = false;

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

App.vue

<template>
  <prism language="javascript">{{ code }}</prism>
</template>

<script>
import Prism from "vue-prism-component";

export default {
  data() {
    return {
      code: "const a = b"
    };
  },
  components: {
    Prism
  }
};
</script>

We have the prism component and we set the language of the code we’re displaying with the language prop. Then we display the code in between the tags.

vue-js-popover

vue-js-popover lets us add a popover to our Vue app.

We can use it by running:

npm i vue-js-popover

to install it.

Then we can write:

main.js

import Vue from "vue";
import App from "./App.vue";
import Popover from "vue-js-popover";

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

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

App.vue

<template>
  <div id="app">
    <button v-popover:foo>Toggle popover</button>

    <popover name="foo">Hello</popover>
  </div>
</template>
<script>
export default {};
</script>

We have the popover component to display a popover.

The name is used as a modifier in the v-popover directive to trigger it.

It’s triggered the button with the v-popover directive.

We change the position and toggle on and off the pointer.

For instance, we can write:

<template>
  <div id="app">
    <button v-popover:foo.right>Toggle popover</button>

    <popover name="foo">Hello</popover>
  </div>
</template>
<script>
export default {};
</script>

We use the right modifier to place the popover on the right.

vue-echarts-v3

vue-echarts-v3 is a chart library for Vue apps. It has support for many kinds of charts.

To use it, we run:

npm install --save echarts vue-echarts-v3

to install it.

Then we write:

<template>
  <div class="echarts">
    <IEcharts :option="bar" :loading="loading" @ready="onReady" @click="onClick"/>
  </div>
</template>

<script type="text/babel">
import IEcharts from "vue-echarts-v3";
export default {
  name: "view",
  components: {
    IEcharts
  },
  props: {},
  data () {
    return {
      loading: false,
      bar: {
        title: {
          text: "fruits"
        },
        tooltip: {},
        xAxis: {
          data: [
            "apple",
            "orange",
            "banana",
          ]
        },
        yAxis: {},
        series: [
          {
            name: "Sales",
            type: "bar",
            data: [5, 20, 36]
          }
        ]
      }
    }
  },
  methods: {
    onReady(instance, ECharts) {
      console.log(instance, ECharts);
    },
    onClick(event, instance, ECharts) {
      console.log(arguments);
    }
  }
};
</script>

<style scoped>
.echarts {
  width: 400px;
  height: 400px;
}
</style>

to create a chart.

The options prop lets us populate the data and labels for our graph.

title has the text prop which has the title.

xAxis has the x-axis labels.

series has the y-axis data.

type has the graph type.

We set the height and width of the graph with CSS.

When we click on the bars on the graph, onClick is run.

It has the data on the bar.

onReady is run when the graph loads.

Conclusion

vue-echarts-v3 is an easy to use chart library for Vue apps. vue-tabs-component lets us add tabs to our app. vue-prism-component is a component to let us display code with syntax highlighting. vue-js-popover is a handy popover component.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *