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 for adding avatars, swiping, and tooltips.
vue-avatar
vue-avatar lets us add an avatar to our Vue app easily.
To use it, we run:
npm i vue-avatar
Then we can use it by importing the Avatar component:
<template>
<div class="demo">
<avatar username="Jane Smith"></avatar>
</div>
</template>
<script>
import Avatar from "vue-avatar";
export default {
name: "app",
components: {
Avatar
}
};
</script>
We just set the name as the value of the username property to display a circle with the initials.
To add an image, we can use the src prop:
<template>
<div class="demo">
<avatar src="http://placekitten.com/200/200"></avatar>
</div>
</template>
<script>
import Avatar from "vue-avatar";
export default {
name: "app",
components: {
Avatar
}
};
</script>
It also supports changing many other options like color, background, size, roundedness, custom styling, and more.
vue-awesome-swiper
The vue-awesome-swiper component lets us add a slider to add that we can swipe to our Vue app.
It’s great for creating carousels and slide shows.
To install it, we run:
npm i vue-awesome-swiper
Then we can use it by registering the plugin and importing the styles:
main.js
import Vue from "vue";
import App from "./App.vue";
import "swiper/css/swiper.css";
import VueAwesomeSwiper from "vue-awesome-swiper";
Vue.use(VueAwesomeSwiper);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
Then we can use it in our component by writing:
<template>
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide v-for="n in 10" :key="n">Slide {{n}}</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
export default {
name: "carrousel",
data() {
return {
swiperOptions: {
pagination: {
el: ".swiper-pagination"
}
}
};
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper;
}
},
mounted() {
this.swiper.slideTo(3, 1000, false);
}
};
</script>
swiper-slide has the slides.
swiperOptions has the options. We set the button for changing slide to have the class swiper-pagination .
The swiper object is available in the this.$refs.mySwiper.$swiper property.
Then we can call methods on it like the slideTo method to slide to the slide with the given index.
1000 is the delay.
The 3rd argument indicates that we don’t want to run callbacks.
Alternatively, we can use it as a directive.
For instance, we can write:
<template>
<div v-swiper:mySwiper="swiperOptions">
<div class="swiper-wrapper">
<div class="swiper-slide" :key="n" v-for="n in 10">
<img src="http://placekitten.com/200/200">
<p>slide {{n}}</p>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</template>
<script>
export default {
name: "carrousel",
data() {
return {
swiperOptions: {
pagination: {
el: ".swiper-pagination"
}
}
};
}
};
</script>
We used the v-swiper:mySwiper directive to create our swiper with the swiperOptions object.
Now we get the same slider, but without sliding automatically to the given slide.
The classes must be set so that we get the right items on the slide.
It can handle many events like clicking sides, transitions, and more.
v-tooltip
To add a tooltip to our Vue app, we can use the v-tooltip component.
To install it, we run:
npm i v-tooltip
Then we can use it by writing:
import Vue from "vue";
import App from "./App.vue";
import VTooltip from "v-tooltip";
Vue.use(VTooltip);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
to register the components and directives.
Then in our component, we can write:
<template>
<div>
<button v-tooltip="`You have ${count} messages`">click me</button>
</div>
</template>
<script>
export default {
data() {
return { count: 100 };
}
};
</script>
to see a tooltip when we hover over the button.
The v-tooltip component lets us add the tooltip.
We can also change the position with some modifiers:
<template>
<div>
<button v-tooltip.right="`You have ${count} messages`">click me</button>
</div>
</template>
<script>
export default {
data() {
return { count: 100 };
}
};
</script>
We can also add classes so that we can style the tooltip:
<template>
<div>
<button
v-tooltip.right="{ content: `You have ${count} messages`, classes: ['a', 'b'] }"
>click me</button>
</div>
</template>
<script>
export default {
data() {
return { count: 100 };
}
};
</script>
We have the classes property in the object. content has the content.
Conclusion
The vue-avatar package lets us add an avatar easily.
The v-tooltip package is a great package for adding tooltips into our app.
vue-awesome-swiper lets us add slides to our app.
