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.