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 charts, unique IDs, sliders, and scroll lock.
vue-unique-id
vue-unique-id lets us add a unique ID to our Vue component.
To use it, we run:
npm i vue-unique-id
to install it.
Then we write:
main.js
import Vue from "vue";
import App from "./App.vue";
import UniqueId from "vue-unique-id";
Vue.use(UniqueId);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app"></div>
</template>
<script>
export default {
created() {
console.log(this.uid);
}
};
</script>
We register the plugin and use the this.uid property to get the unique ID.
Also, we can get the ID with the $id method.
For instance, we can write:
<template>
<div id="app"></div>
</template>
<script>
export default {
created() {
console.log(this.$id("foo"));
}
};
</script>
to get an ID with the 'foo' suffix added to it.
VueVisible
VueVisible is a directive that lets us display something conditionally.
To use it, we run:
npm i vue-visible
to install it.
Then we use it by writing:
<template>
<div id="app">
<div v-visible="isVisible">I'm visible</div>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
};
}
};
</script>
We just use the v-visible directive like the v-show directive to conditionally display something.
v-scroll-lock
v-scroll-lock lets us add a scroll lock to our Vue component to prevent scrolling.
To use it, we run:
npm i v-scroll-lock
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VScrollLock from "v-scroll-lock";
Vue.use(VScrollLock);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
Modal.vue
<template>
<div>
<div class="modal" v-if="open">
<button @click="closeModal">X</button>
<div class="modal-content" v-scroll-lock="open">
<p v-for="n in 100" :key="n">{{n}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Modal",
data() {
return {
open: true
};
},
methods: {
openModal() {
this.open = true;
},
closeModal() {
this.open = false;
}
}
};
</script>
App.vue
<template>
<div>
<modal></modal>
</div>
</template>
<script>
import Modal from "./components/Modal";
export default {
components: { Modal }
};
</script>
We have the Modal component with the v-scroll-lock directive applied to the content.
Now we won’t be able to scroll even though we have lots of content that overflow the screen.
Vue Glide
Vue Glide is a slider component for Vue apps.
To use it, we run:
npm i vue-glide-js
to install it.
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueGlide from "vue-glide-js";
import "vue-glide-js/dist/vue-glide.css";
Vue.use(VueGlide);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<vue-glide>
<vue-glide-slide v-for="i in 10" :key="i">Slide {{ i }}</vue-glide-slide>
</vue-glide>
</div>
</template>
<script>
import { Glide, GlideSlide } from "vue-glide-js";
export default {
components: {
[Glide.name]: Glide,
[GlideSlide.name]: GlideSlide
}
};
</script>
We use the vue-slide and vue-glide-slide component to display slides on the screen.
vue-chartist
vue-chartist is a chart library based of Chartist.js.
To use it, we run:
npm i vue-chartist chartist
to install it.
We use chartist for the CSS.
Then we write:
main.js
import Vue from "vue";
import App from "./App.vue";
Vue.use(require("vue-chartist"));
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<chartist ratio="ct-major-second" type="Line" :data="chartData" :options="chartOptions"></chartist>
</div>
</template>
<script>
import "chartist/dist/chartist.css";
export default {
data() {
return {
chartData: {
labels: ["A", "B", "C"],
series: [[1, 3, 2], [4, 6, 5]]
},
chartOptions: {
lineSmooth: false
}
};
}
};
</script>
to use it.
We use the chartist component to create the graphs.
type is the kind of graph we want to create.
data has the labels and series data.
labels is for the x-axis, and series is for the y-axis.
chartOptions has the options. We set lineSmooth to false to disable line smoothing.
Conclusion
vue-unique-id creates a unique ID for our Vue components.
VueVisible is a directive that works like v-show.
v-scroll-lock disables scrolling in our elements.
Vue Glide lets us create a slider.
vue-chartist lets us create graphs with little effort.
