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 displaying JSON, adding tooltips, adding sticky elements, and toggle switches.
vue-json-pretty
vue-json-pretty lets us render JSON in our Vue app.
To use it, first we install it by running:
npm i vue-json-pretty
Then we can use it by writing:
<template>
<vue-json-pretty :path="'res'" :data="{ foo: 'bar' }" @click="handleClick"></vue-json-pretty>
</template>
<script>
import VueJsonPretty from "vue-json-pretty";
export default {
components: {
VueJsonPretty
},
methods: {
handleClick(e) {
console.log(e);
}
}
};
</script>
We use the vue-json-pretty component, which has the JSON we want to display on the screen in the data prop.
path is set to the root path.
handleClick is run with the click event is emitted.
It’s emitted whenever we clicked on the rendered JSON.
We’ll get the path that we clicked on.
There are many other options available like showing lines, the depth of the data to show, and much more.
vue-directive-tooltip
vue-directive-tooltip is a Vue directive for the tooltip.
To use it, we run:
npm i vue-directive-tooltip
to install it.
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import Tooltip from "vue-directive-tooltip";
import "vue-directive-tooltip/dist/vueDirectiveTooltip.css";
Vue.use(Tooltip);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<span v-tooltip="'tooltip text'">foo</span>
</div>
</template>
<script>
export default {};
</script>
We register the plugin and then use the v-tooltip directive to display a tooltip when we hover over the span.
The value is the content.
We can change the content, positioning, delay, offset, and trigger it in different ways.
Also, we can apply custom styling to our tooltip.
vue-sticky
To create a sticky element, we can use the vue-sticky package.
To use it, we run:
npm i vue-sticky
to install it.
Then we can use it by writing:
<template>
<div>
<div v-sticky="{ zIndex: 1000, stickyTop: 0, disabled: false }">
<p>lorem ipsum</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac urna tincidunt, bibendum ipsum et, auctor risus. Cras eget velit ut risus viverra sodales. Suspendisse bibendum sollicitudin quam, vel ullamcorper quam sagittis nec. Aenean egestas elit enim, vitae eleifend leo sagittis in. Sed eget dignissim elit, at scelerisque justo. Mauris rhoncus lectus in sagittis rhoncus. Curabitur viverra eleifend nulla. Aliquam sollicitudin nulla nibh, porttitor eleifend purus pharetra vitae. Donec urna libero, aliquam in consectetur in, fringilla ut sem. Sed placerat ex at orci bibendum blandit. Sed sit amet odio ac purus hendrerit tincidunt. Donec sed lacinia tellus. Fusce vitae nunc id tellus interdum semper. Mauris et cursus velit. Praesent finibus congue iaculis. Vivamus aliquet et magna sit amet commodo.</p>
</div>
</template>
<script>
import VueSticky from "vue-sticky";
export default {
directives: {
sticky: VueSticky
}
};
</script>
We use the v-sticky directive to make the div sticky.
stickyTop lets us specify where to put the sticky div relative to the top of the screen.
zIndex lets us set the z-index of the sticky element.
disabled indicates if we want to disable the sticky element or not.
vue-feather-icons
vue-gallery is a responsive video and image gallery.
To use it, we run:
npm i vue-feather-iconsto install it.
Then we use it by writing:
<template>
<div>
<activity-icon size="1.5x"></activity-icon>
</div>
</template>
<script>
import { ActivityIcon } from "vue-feather-icons";
export default {
components: {
ActivityIcon
}
};
</script>
We just import the icon and then use it.
Vue Switches
Vue Switches is a toggle switch component for our Vue app.
To use it, we run:
npm i vue-switches
to install it.
Then we can use it by writing:
<template>
<div>
<switches v-model="enabled"></switches>
</div>
</template>
<script>
import Switches from "vue-switches";
export default {
components: {
Switches
},
data() {
return {
enabled: false
};
}
};
</script>
We just use the switches component to add the switch.
It binds to the enabled state with v-model .
It supports texts and color changes.
Conclusion
vue-json-pretty is a package to let us display JSON on the screen.
vue-directive-tooltip is a tooltip directive we can use in Vue apps.
vue-sticky lets us create a sticky element.
vue-feather-icons is a set of icon components we can use.
Vue Switches lets us add a toggle switch on our screen.
