We can add a progress bar to a Vue app with the vue-progress-bar package.

To get started, we install the package by running:

npm install vue-progressbar

Then we can register it by adding the following to main.js:

import Vue from "vue";
import App from "./App.vue";
import VueProgressBar from "vue-progressbar";

const options = {
  color: "#bffaf3",
  failedColor: "#874b4b",
  thickness: "5px",
  transition: {
    speed: "0.2s",
    opacity: "0.6s",
    termination: 300
  },
  autoRevert: true,
  location: "left",
  inverse: false
};

Vue.use(VueProgressBar, options);

Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

We called Vue.use with VueProgressBar and an object with some options to style the progress bar.

Then in App.vue, we add:

<template>
  <div id="app">
    <vue-progress-bar></vue-progress-bar>
  </div>
</template>

<script>
export default {
  name: "App",
  mounted () {
    this.$Progress.finish()
  },
  created () {
    this.$Progress.start()
    this.$router.beforeEach((to, from, next) => {
      if (to.meta.progress !== undefined) {
        let meta = to.meta.progress
        this.$Progress.parseMeta(meta)
      }
      this.$Progress.start()
      next()
    })
    this.$router.afterEach((to, from) => {
      this.$Progress.finish()
    })
  }
};
</script>

We add call this.$Progress.start() to display the progress bar.

Then we called this.$Progress.finish() to remove the progress bar from view.

Also, we have the $this.$router.beforeEach call to show the progress bar when navigation begins and call $this.$progress.finish() when navigation is done.

Now we can see a progress bar on the left side of the screen when the component or routes load.

We can create a scrollable box with the vue-perfect-scrollbar package.

First, we install the package by running:

npm install vue-perfect-scrollbar

Then we can register the component that comes with the package in a component and use it by writing:

<template>
  <div id="app">
    <VuePerfectScrollbar
      class="scroll-area"
      v-once
      :settings="settings"
      @ps-scroll-y="scrollHandle"
    >
      <img src="https://placekitten.com/g/300/300" height="300" width="300" alt>
    </VuePerfectScrollbar>
  </div>
</template>

<script>
import VuePerfectScrollbar from "vue-perfect-scrollbar";

export default {
  name: "App",
  components: {
    VuePerfectScrollbar
  },
  data() {
    return {
      settings: {
        maxScrollbarLength: 60
      }
    };
  },
  methods: {
    scrollHandle(evt) {
      console.log(evt);
    }
  }
};
</script>

<style>
.scroll-area {
  position: relative;
  margin: auto;
  width: 200px;
  height: 200px;
}
</style> 

We used the VuePerfectScrollbar component to create a box that have their own scroll bar.

Inside the component, we have an image that we put inside the box.

In the script tags, we add the VuePerfectScrollbar package and registered it in the component property.

In the data method, we return an object with the settings object with the maxScrollbarLength property to set the scrollable length in pixels.

We also have a scroll handler that takes an event object to get us some event data.

In the style tags, we style the scroll area by setting the width and height of the scroll area.

The @ps-scroll-y handler is set to the scrollHandle method so that we can track the scrolling position and other information.

Then we set the class in the VuePerfectScrollbar component.

Now we get a cat picture with horizontal and vertical scrollbars that we can scroll with the mouse wheel or drag with the mouse button.

The scrollbar only shows when we hover over the picture.

We can add an infinite scrolling feature in our Vue app with the vue-infinite-scroll package.

To get started, we install the package by running:

npm install vue-infinite-scroll --save

The in main.js, we register the plugin by writing:

import Vue from "vue";
import App from "./App.vue";
import infiniteScroll from "vue-infinite-scroll";
Vue.use(infiniteScroll);

Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

The infiniteScroll package is registered with Vue.use.

Then we can add infinite scrolling by writing:

<template>
  <div id="app">
    <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
      <p v-for="d of data" :key="d">{{d}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      data: [],
      busy: false
    };
  },
  methods: {
    loadMore() {
      this.busy = true;
      setTimeout(() => {
        this.data = [
          ...this.data,
          ...Array(50)
            .fill()
            .map(() => Math.random())
        ];
        this.busy = false;
      }, 1000);
    }
  }
};
</script>

We add the v-infinite-scroll directive to a div.

The loadMore method is run when we scroll to the bottom of the div to load more data.

loadMore just adds more data into the data array. The numbers are randomly generated and added.

We can set the infinite-scroll-disabled prop to disable infinite scrolling if we have a given state.

infinite-scroll-distance is the percent of the div that’s left to scroll before we trigger infinite scrolling.

Inside the div, we loop through the entries from the data state.

Once we have that, then we can keep scrolling down to get more numbers in our numbers list.

We can create a slideshow in our Vue app with the Vue Carousel library.

To install it, we run:

npm install -S vue-carousel

Then we register the plugin globally by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueCarousel from "vue-carousel";
Vue.use(VueCarousel);

Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

We can also register the components locally by writing:

import { Carousel, Slide } from 'vue-carousel';
export default {
  ...
  components: {
    Carousel,
    Slide
  }
  ...
};

in the component.

Then we can write:

<template>
  <div id="app">
    <carousel>
      <slide>Slide 1 Content</slide>
      <slide>Slide 2 Content</slide>
    </carousel>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We can change the number of slides per page by using the per-page prop.

And we can use the navgiationEnabled prop to enable navigation in our carousel.

For instance, we can write:

<template>
  <div id="app">
    <carousel :per-page="1" navigationEnabled>
      <slide>Slide 1 Content</slide>
      <slide>Slide 2 Content</slide>
    </carousel>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Then we have one slide per page and navigation buttons.

We can also add autoplay with the autoplay prop. The autoplayTimeout to add the length of time that we wait before we move to the next slide.

There’s also the autoplayHoverPause boolean prop to let us pause the slides by hovering over a slide.

Vue Carousel is a package that makes creating slideshows easily.

It’s also very flexible.

Vue.js provides us with libraries for creating simple CSS transitions with the transition component for creating transition for single elements or components.

It also has the transition-group component for creating transitions for list items.

Transition

We can use the transition component as follows:

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="slide-fade">
      <p v-if="show">hello</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",

  data() {
    return {
      show: true
    };
  }
};
</script>

<style>
.slide-fade-enter-active {
  transition: all 0.9s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>

We have the CSS for the transition.

The transition translates the p element that wrapped in the transition component by sliding it 20px to the right.

It also changes the opacity of the element as the sliding occurs.

In the component code, we have the show state to toggle on and off the p element.

The prefix of the classes has to match the name prop of the transition class.

The button changes the value of show.

Then when we click the Toggle button, we’ll see the hello text slide to the right and fade and vice versa if we click on the button.

Transition Group

If we want to create transitions for a list of elements or components, we have to use the transition-group component.

To use it, we write:

<template>
  <div id="app">
    <button v-on:click="add">Add</button>
    <button v-on:click="remove">Remove</button>
    <transition-group name="list" tag="p">
      <span v-for="item in items" :key="item" class="list-item">{{ item }}</span>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      items: [1, 2, 3, 4, 5],
      nextNum: 5
    };
  },
  methods: {
    randomIndex() {
      return Math.floor(Math.random() * this.items.length);
    },
    add() {
      this.items.splice(this.randomIndex(), 0, ++this.nextNum);
    },
    remove() {
      this.items.splice(this.randomIndex(), 1);
    }
  }
};
</script>

<style>
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

The code above, has an items array, which is rendered inside the transition-group component.

In the methods property, we have the randomIndex method to generate a random index to insert items into.

The item is this.nextNum plus 1.

The add method does the insertion of the item.

remove removes an item from a random index.

In the template, we have Add and Remove buttons to add and remove entries.

They call the methods to do that.

In the styles section, we have the styles for the CSS transition.

The prefix of the classes has to match the name prop of the transition class.

We translate the items being removed before it disappears.

Opacity is also turned to 0 before removal.

When we click Add, we have transition: all to apply all changes properties.

When we click on Remove, we get the list-leave-to transition.

Therefore, we get the opacity changing transition when we add or remove an entry.