DEV Community

loading...

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

aumayeung profile image John Au-Yeung Originally published at thewebdev.info on ・3 min read

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

Enter fullscreen mode Exit fullscreen mode

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");

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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");

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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");

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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 appeared first on The Web Dev.

Discussion (0)

pic
Editor guide