Category: Vue

We can add an avatar easily into a Vue app with the vue-avatar package.

To use it, we install it by running:

npm i vue-avatar

Then we write:

<template>
  <div id="app">
    <avatar username="jane smith"></avatar>
  </div>
</template>

<script>
import Avatar from "vue-avatar";

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

in our component.

We imported and register the component bundled with the package on the components property.

Then we use the avatar component from the package by setting the username prop to the string we want.

Then it’ll generate the initials automatically from the name and display it.

We can change the background color with the backgroundColor prop.

The src prop lets us display an image by setting the URL of it.

We can write:

<avatar src="http://placekitten.com/200/200"></avatar>

to display an image for the avatar.

The image will override text from username.

There are also other props to change sizes and add custom styles.

With the library, we can add avatars easily to a Vue app.

We can add a good look audio player to our Vue app with the xns-audio-player-simple package.

To install it, we run:

npm i xns-audio-player-simple

Then in main.js, we add:

import Vue from "vue";
import App from "./App.vue";
import XnsAudioPlayerSimple from "xns-audio-player-simple";

Vue.use(XnsAudioPlayerSimple);
Vue.config.productionTip = false;

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

We called Vue.use(XnsAudioPlayerSimple); to register the plugin.

Next, in App.vue, we write:

<template>
  <div id="app">
    <xns-audio-player-simple :playlist="playlist"></xns-audio-player-simple>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      playlist: [
        {
          audio:
            "https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3",
          artist: "singer",
          title: "music",
          album: "album",
          cover: "http://placekitten.com/200/200"
        }
      ]
    };
  }
};
</script>

We have a playlist array with the entries being objects with the audio property with the URL or path to the audio file.

artist has the artist name.

title has the audio title.

album has the album name.

cover has the cover image URL.

Then we should see an audio player with the cover image referenced by the URL.

We can play and pause the audio as we please.

To increase scrolling performance when scrolling big lists, we have to use the use virtual scrolling to only show the items that are being scrolled.

To make this task easy, we can use the vue-virtual-scroll-list to create a virtual scroll list.

To install it, we run:

npm install vue-virtual-scroll-list --save

Then we use it by creating a component to display the entries.

We do that by creating Item.vue in the components folder:

<template>
  <div>{{ index }} - {{ source.num }}</div>
</template>

<script>
export default {
  name: "Item",
  props: {
    index: Number,
    source: Object
  }
};
</script>

It takes the index prop for the index, and the source prop, which is an array entry object that we want to display.

The object should have a unique ID and other properties that display.

Next, we create a parent component that uses the virtual-list component that comes with the package.

In App.vue, we add:

<template>
  <div id="app">
    <virtual-list
      style="height: 360px; overflow-y: auto;"
      data-key="uid"
      :data-sources="nums"
      :data-component="itemComponent"
    />
  </div>
</template>

<script>
import Item from "./components/Item";
import VirtualList from "vue-virtual-scroll-list";

export default {
  name: "App",
  components: { "virtual-list": VirtualList },
  data() {
    return {
      itemComponent: Item,
      nums: Array(1000)
        .fill()
        .map((_, i) => ({ uid: i.toString(), num: Math.random() }))
    };
  }
};
</script>

We set the itemComponent state to the Item component we just created.

Also, we register the 'virtual-list' component that we imported rom the vue-virtual-scroll-list package.

The data we display are in the nums folder, which is an array with 1000 entries that has a bunch of random numbers in it.

Then in the template, we style our virtual scroll list.

The data-key should the property name of the array entry that has the unique ID in it.

In this example, it would be the uid field.

num is the property of the field that we display, which would be passed to the source prop, so we use source.num to access the data.

data-sources is the data source that we want to display, which is nums in our example.

data-component should be set to the component that we used to render the rows.

In this case, it’s the Item component.

We set the height of the list to 360px and enable overflow in the vertical direction so that we can scroll.

Now we have a list with lots of numbers than we can scroll up and down quickly because of virtual scrolling.

To make a page that displays images like Google Image or Flickr in a Vue app, we can use the vue-masonry package.

We can install it by running:

npm install vue-masonry --save

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

import Vue from "vue";
import App from "./App.vue";
import { VueMasonryPlugin } from "vue-masonry";

Vue.use(VueMasonryPlugin);

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

We register the plugin globally by using the Vue.use method.

Then we can use it by adding the following to our component:

<template>
  <div id="app">
    <div v-masonry transition-duration="0.3s" item-selector=".item">
      <div
        class="item"
        v-masonry-tile
        :key="index"
        :fit-width="true"
        :horizontal-order="true"
        v-for="(item, index) in blocks"
      >
        <img :src="item">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      blocks: Array(50)
        .fill()
        .map(() => {
          const size = 100 + Math.floor(Math.random() * 100);
          return `https://placekitten.com/g/200/${size}`;
        })
    };
  }
};
</script>

<style>
.item {
  width: 200px;
  margin: 3px;
}
</style>

We add the images by using the Place Kitten with the width and the height of the image we want to get in the path.

Also, we styled our type by using the item class to set the width and the margin.

Then in the template, we use the v-masonry directive.

We set the transition-duration to set the duration of the animation when tiles load.

The item-selector is used to set the selector of each tile.

We set it to the item class so that we can style our masonry tiles.

Inside the outer div, we have another div with the v-masonry-tile directive.

We have the fit-width option to set the width of the container.

horizontal-order lets us lay out the items to maintain left to right order.

Inside the div, we have the img tag to display the actual image in the tile.

Now we get a responsive masonry grid that displays cat pictures.

The images will rearrange to fit the screen if we resize the screen.

The vue-spinners package is very useful for adding a loading spinner into our Vue app.

It’s very easy to use.

We just have to install the package by running:

npm install --save @saeris/vue-spinners

or

yarn add @saeris/vue-spinners

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

import Vue from "vue";
import App from "./App.vue";
import { VueSpinners } from "@saeris/vue-spinners";

Vue.use(VueSpinners);

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

Then in App.vue, we write:

<template>
  <div id="app">
    <ClipLoader :loading="loading" color="#bada55" :size="150" sizeUnit="px"/>
  </div>
</template>

<script>
export default {
  name: "App",
  data(){
    return {
      loading: true
    }
  },
  created() {
    this.loading = true;
  },
  mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 5000);
  }
};
</script>

We have the ClipLoader component on our template.

We set the color prop to set the color of the spinner.

sizeUnit is set to px for pixels.

size is set to 150, so the spinner is set to 150px big.

We have the loading state which is set to the value of the loading prop to set when the spinner will be shown.

Then in the created hook, which loads before the mounted, we set this.loading to true so that the spinner will show.

Then in mounted we use setTimeout to set this.loading to false after 5 seconds.

This will unload the spinner after 5 seconds.

Now we get a green spinner that displays for 5 seconds when the component loads.