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 a component to skip to an item with the keyboard, watching scrolling, and adding charts.
vue-skip-to
We can use the vue-skip-to package to skip to the element we want by pressing Tab.
To use it, we install it by running:
npm i vue-skip-to
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueSkipTo from "vue-skip-to";
Vue.use(VueSkipTo);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<vue-skip-to to="#num-100">skip</vue-skip-to>
<div v-for="n in 100" :key="n" :id="`num-${n}`">{{n}}</div>
</div>
</template>
<script>
export default {
name: "app"
};
</script>
We use the vue-skip-to component which lets us move to a given element with the given selector.
We can jump to that element by pressing Tab.
vue-scrollactive
vue-scrollactive lets us detect which element is visible when we scroll.
To use it, we run:
npm i vue-scrollactive
to install it.
Then we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueScrollactive from "vue-scrollactive";
Vue.use(VueScrollactive);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<scrollactive v-on:itemchanged="onItemChanged">
<a href="#home" class="scrollactive-item">Home</a>
<a href="#about-us" class="scrollactive-item">About Us</a>
</scrollactive>
<div
id="home"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur maximus lacus vel scelerisque placerat. Donec elementum ligula in ipsum gravida aliquam. Aenean feugiat risus eu est maximus, eu molestie nibh aliquet. Aliquam ipsum purus, pellentesque a rhoncus et, mattis imperdiet dui. Nunc ante quam, pretium at convallis at, finibus efficitur sem. Etiam venenatis nunc lacus, ac congue lacus luctus a. Maecenas pretium vestibulum ex, tristique commodo orci porta vel. Fusce auctor est nec lorem dignissim viverra. Nunc volutpat interdum eros a mattis.</div>
<div
id="about-us"
>Nunc ac bibendum turpis, vitae semper tortor. Nullam leo lorem, euismod sit amet vulputate non, ullamcorper at dolor. In hac habitasse platea dictumst. Nulla tincidunt non quam vel viverra. Suspendisse ut augue vitae elit semper volutpat. Ut non porttitor risus, in condimentum orci. Aliquam erat volutpat. Aenean accumsan, leo et pulvinar elementum, quam dui pharetra libero, a mattis diam nibh et velit. Fusce ultrices massa mi, ut lobortis mi condimentum nec. In eget lectus tincidunt, imperdiet ipsum quis, euismod velit. Curabitur sodales nibh et enim efficitur, quis rhoncus ante semper. Donec id blandit nisl, vitae pharetra ante.</div>
</div>
</template>
<script>
export default {
name: "app",
methods: {
onItemChanged(event, currentItem, lastActiveItem) {
console.log(event, currentItem, lastActiveItem);
}
}
};
</script>
<style>
#home,
#about-us {
height: 500px;
}
</style>
to use it.
We use the scrollactive component to watch for scrolling.
It’ll watch elements that are set with the ID in the href .
So when we scroll to the home and about-us divs, we’ll see the onItemChanged method run.
itemchanged event is emitted when we scroll.
Highcharts-Vue
highcharts-vue is a chart library for Vue apps.
To use it, we run:
npm i highcharts-vue highcharts
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import HighchartsVue from "highcharts-vue";
Vue.use(HighchartsVue);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<highcharts :options="chartOptions"></highcharts>
</template>
<script>
export default {
data() {
return {
chartOptions: {
series: [
{
data: [1, 2, 3]
}
]
}
};
}
};
</script>
We use the highcharts component. Then we use the options prop with the data we want to display.
data is the values on the y-axis we want to display.
We can set the titles and axes labels by writing:
<template>
<highcharts :options="chartOptions"></highcharts>
</template>
<script>
export default {
data() {
return {
chartOptions: {
title: {
text: "Fruit Consumption"
},
xAxis: {
title: {
text: "Fruit Number"
},
tickInterval: 1,
categories: ["2020-01-01", "2020-01-02", "2020-01-03"]
},
yAxis: {
title: {
text: "Fruit eaten"
},
tickInterval: 1
},
series: [
{
name: "alex",
data: [1, 0, 4]
},
{
name: "james",
data: [5, 7, 3]
}
]
}
};
}
};
</script>
title has the title text.
categories has the x-axis labels.
yAxis has the y-axis text including text withe the label.
series lets us plot one or more lines.
data are the y-axis values.
Conclusion
vue-skip-to lets users skip to an element with the keyboard.
vue-scrollactive lets us watch scrolling to some element.
Highcharts-Vue is a simple to use chart library for Vue
