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 to add lightbox, charts, and a scrolling display.
vue-easy-lightbox
vue-easy-lightbox is an easy to use lightbox component.
To use it, we install it by running:
npm i vue-easy-lightbox
Then we use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import Lightbox from "vue-easy-lightbox";
Vue.use(Lightbox);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<vue-easy-lightbox visible :imgs="imgs" :index="index" @hide="handleHide"></vue-easy-lightbox>
</div>
</template>
<script>
export default {
methods: {
handleHide() {}
},
data() {
return {
imgs: [
"http://placekitten.com/200/200",
"http://placekitten.com/201/201"
],
index: 0
};
}
};
</script>
We have the vue-easy-lightbox component, which we use after we register it in main.js
imgs takes an array of URL strings of the images.
Now we see images and controls to navigate between images.
We can zoom and rotate images as we please.
It has many other options like disable the escape button, disabling the move button, and more.
vue-apexcharts
vue-apexcharts is a chart library made for Vue apps.
To install it, we run:
npm i vue-apexcharts apexcharts
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueApexCharts from "vue-apexcharts";
Vue.use(VueApexCharts);
Vue.component("apexchart", VueApexCharts);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<apexchart width="500" type="bar" :options="chartOptions" :series="series"></apexchart>
</div>
</template>
<script>
export default {
methods: {
handleHide() {}
},
data() {
return {
chartOptions: {
chart: {
id: "example"
},
xaxis: {
categories: [2011, 2012, 2013, 2014, 2015]
}
},
series: [
{
name: "series",
data: [30, 40, 35, 50, 49]
}
]
};
}
};
</script>
xaxis.categories has the x-axis labels.
series has the data for the y-axis values.
type is the type of chart to display.
width is the width.
The series prop has the y-axis values.
options has all the options, including the x-axis data.
We can also change the colors:
<template>
<div>
<apexchart width="500" type="bar" :options="chartOptions" :series="series"></apexchart>
</div>
</template>
<script>
export default {
methods: {
handleHide() {}
},
data() {
return {
chartOptions: {
chart: {
id: "example"
},
xaxis: {
categories: [2011, 2012, 2013, 2014, 2015],
labels: {
style: {
colors: ["red", "green"]
}
}
}
},
series: [
{
name: "series-1",
data: [30, 40, 35, 50, 49]
}
]
};
}
};
</script>
vue-seamless-scroll
vue-seamless-scroll lets us add seamless scrolling to Vue apps.
First, we can the package by running:
npm i vue-seamless-scroll
Then we can use it by writing:
<template>
<vue-seamless-scroll :data="listData" class="seamless-warp">
<ul class="item">
<li v-for="item in listData" :key="item.title">
<span class="title" v-text="item.title"></span>
</li>
</ul>
</vue-seamless-scroll>
</template>
<style scoped>
.seamless-warp {
height: 229px;
overflow: hidden;
}
</style>
<script>
export default {
data() {
return {
listData: Array(100)
.fill()
.map((a, i) => ({
title: `row ${i}`
}))
};
}
};
</script>
We have a list of data that we loop through automatically.
Then title property of each row is displayed.
There are many other options to change the styling.
vue-silentbox
vue-silentbox is another lightbox component that we can use to display images and videos.
To install it, we run:
npm i vue-silentbox
Then we can use it by writing:
index.html
import Vue from "vue";
import App from "./App.vue";
import VueSilentbox from "vue-silentbox";
Vue.use(VueSilentbox);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<silent-box :gallery="images"></silent-box>
</div>
</template>
<script>
export default {
data() {
return {
images: [
{
src: "https://placekitten.com/200/200",
description: "cat 1"
},
{
src: "https://placekitten.com/201/201",
description: "cat 2"
}
]
};
}
};
</script>
We register the VueSlientBox plugin.
Then we pass in the images array into the gallery . When we click an image, we see the image displayed and the background is covered with a backdrop. It lets us set many other options like styles, autoplay, video controls, etc.
Conclusion
We can use vue-easy-lightbox or vue-silentbox to add a lightbox component to our Vue app. vue-seamless-scroll is a component that lets us create displays that scrolls automatically. vue-apexcharts lets us create charts easily. Thanks for reading my article, I hope you found it helpful!
