Top Vue Packages for Adding Lightbox, Charts, and Scrolling Display
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:21:35

---
title: Top Vue Packages for Adding Lightbox, Charts, and Scrolling Display
published: true
date: 2020-07-27 19:56:46 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/27/top-vue-packages-for-adding-lightbox-charts-and-scrolling-display/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-adding-lightbox-charts-and-scrolling-display
---

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

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!

The post [Top Vue Packages for Adding Lightbox, Charts, and Scrolling Display](https://thewebdev.info/2020/07/27/top-vue-packages-for-adding-lightbox-charts-and-scrolling-display/) appeared first on [The Web Dev](https://thewebdev.info).