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 the best packages for adding a loading spinner, carousel, rendering Markdown to HTML, display a QR code, and show a sidebar menu.
vue-owl-carousel
vue-owl-carousel lets us add an image carousel to our Vue app.
To use it, we run:
npm i vue-owl-carousel
to install it.
Then we write:
<template>
<div>
<carousel>
<img v-for="n in 10" :key="n" :src="`https://placeimg.com/200/200/any?${n}`">
</carousel>
</div>
</template>
<script>
import carousel from "vue-owl-carousel";
export default {
components: { carousel }
};
</script>
to add a carousel to our app.
We use the carousel component to add the carousel.
Then we add images between the tags to populate the images.
Navigation is displayed automatically when the screen can’t display all the images on the screen simultaneously.
It takes a few props.
autoplay lets us enable autoplay.
nav lets us enable or disable the navigation.
It also emits a few events.
changed and updated events are emitted.
vue-sidebar-menu
vue-sidebar-menu is a library that lets us add a sidebar easily into our Vue app.
To install it, we run:
npm i vue-sidebar-menu
Then we write:
<template>
<div>
<sidebar-menu :menu="menu"/>
</div>
</template>
<script>
import { SidebarMenu } from "vue-sidebar-menu";
import "vue-sidebar-menu/dist/vue-sidebar-menu.css";
export default {
components: {
SidebarMenu
},
data() {
return {
menu: [
{
header: true,
title: "menu",
hiddenOnCollapse: true
},
{
href: "/",
title: "user",
icon: "fa fa-user"
},
{
href: "/charts",
title: "charts",
icon: "fa fa-chart-area",
child: [
{
href: "/charts/sublink",
title: "child"
}
]
}
]
};
}
};
</script>
to add it.
icon is for the classes for the icons.
href is the path to do to.
child is the child links.
title is the name that’s displayed on the menu entry.
hiddenOnCollapse lets us choose whether to hide the menu on collapse or not.
Vue Showdown
Vue Showdown is a Markdown display component.
We can use it to render Markdown into HTML.
To install it, we run:
npm install vue-showdown
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueShowdown from "vue-showdown";
Vue.use(VueShowdown, {
flavor: "github",
options: {
emoji: false
}
});
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<VueShowdown markdown="## markdown" flavor="github" :options="{ emoji: true }"/>
</div>
</template>
<script>
export default {
data() {
return {};
}
};
</script>
We use the VueShowdown component by registering it with some options.
flavor is the flavor of Markdown we render.
emoji lets us choose to render emoji or not.
We pass the Markdown into the markdown prop.
v-qrcode
v-qrcode lets us render QR codes in our Vue app.
To use it, we run:
npm i v-qrcode
to install it.
Then we write:
<template>
<div>
<qrcode :cls="qrCls" :value="qrText"></qrcode>
</div>
</template>
<script>
import Qrcode from "v-qrcode";
export default {
data() {
return {
qrCls: "qrcode",
qrText: "hello"
};
},
components: {
Qrcode
}
};
</script>
to use it.
We pass in the cls prop to set the class name of the wrapper.
value is the string to generate the QR code from.
We can also change the size, level, background, foreground, adding, and what element to render the code in.
vue-element-loading
The vue-element-loading plugin lets us add a loading spinner to our Vue app.
To use it, we run:
npm i vue-element-loading
to install it.
Then we write:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueElementLoading from "vue-element-loading";
Vue.component("VueElementLoading", VueElementLoading);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<vue-element-loading active spinner="bar-fade-scale"/>
</div>
</template>
<script>
export default {};
</script>
to use it.
We have the vue-element component which loads the spinner.
active makes it show.
spinner lets us set the type of spinner we want to display.
Conclusion
vue-owl-carousel is an easy to use carousel library.
vue-sidebar-menu lets us display a sidebar menu in our app.
Vue Showdown renders Markdown into HTML.
v-qrcode displays a QR code created from a string.
vue-element-loading is a loading spinner.
