Categories
Top Vue Packages

Top Vue Packages for Adding Lightbox, Charts, and Scrolling Display

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 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!

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.