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 printable areas, highlight text, link previews, handling keyboard shortcuts, and tag inputs.
vue-print-nb
vue-print-nb lets us define a printable area in our Vue app.
To install it, we run:
npm i vue-print-nb
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import Print from "vue-print-nb";
Vue.use(Print);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<div id="printMe">
<p>foo</p>
<p>bar</p>
<p>baz</p>
</div>
<button v-print="'#printMe'">Print</button>
</div>
</template>
<script>
export default {};
</script>
We use the v-print directive and pass the select of the printable element to it.
Then when we click on a button, then we’ll see a print dialog box with the preview of the printable area.
link-prevue
link-prevue provides us with a Vue component that shows us the preview of the page for the given URL.
We install it by running:
npm i link-prevue
Then we can use it by writing:
<template>
<div id="app">
<link-prevue url="https://example.com/"></link-prevue>
</div>
</template>
<script>
import LinkPrevue from "link-prevue";
export default {
components: {
LinkPrevue
}
};
</script>
We import the component and set the url attribute to set the attribute for the link.
It’s customizable.
For instance, we can set a custom loading indicator:
<template>
<div id="app">
<link-prevue url="https://example.com/">
<template slot="loading">
<h1>Loading...</h1>
</template>
</link-prevue>
</div>
</template>
<script>
import LinkPrevue from "link-prevue";
export default {
components: {
LinkPrevue
}
};
</script>
We populate the loading slot with our own content.
Then we display our loading indicator as it loads.
Other things we can customize include the card width, whether we show the button or not, and more.
v-hotkey
v-hotkey is a plugin that lets us handle keyboard shortcuts easier.
To install it, we run:
npm i v-hotkey
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueHotkey from "v-hotkey";
Vue.use(VueHotkey);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<span v-hotkey="keymap" v-show="display">Press 'ctrl + m' or hold 'enter'</span>
</template>
<script>
export default {
data() {
return {
display: true
};
},
methods: {
toggle() {
this.display = !this.display;
},
show() {
this.display = true;
},
hide() {
this.display = false;
}
},
computed: {
keymap() {
return {
"ctrl+m": this.toggle,
enter: {
keydown: this.hide,
keyup: this.show
}
};
}
}
};
</script>
We have the keymap computed property that maps the key combinations to the method it calls.
Then we can use the v-hotkey directive to lets us use the key combos on the element.
vue-input-tag
vue-input-tag is a simple tags input for our Vue app.
To use it, we run:
npm i vue-input-tag
to install it.
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import InputTag from "vue-input-tag";
Vue.component("input-tag", InputTag);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<input-tag v-model="tags"></input-tag>
<p>{{tags}}</p>
</div>
</template>
<script>
export default {
data() {
return {
tags: []
};
}
};
</script>
We use the input-tag component to add the tags input.
Then we use v-model to bind the entered tags into an array of strings.
We can set various options like whether we want to allow duplicates, placeholders, max number of tags, and more.
vue-text-highlight
vue-text-highlight lets us highlight text in our Vue components.
To use it, we run:
npm i vue-text-highlight
to install it.
Then we use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import TextHighlight from "vue-text-highlight";
Vue.component("text-highlight", TextHighlight);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<text-highlight :queries="queries">{{ description }}</text-highlight>
</div>
</template>
<script>
export default {
data() {
return {
queries: ["jump", "fox"],
description: "The quick brown fox jumps over the lazy dog"
};
}
};
</script>
We use the text-highlight component with the queries prop to indicate what we want to highlight.
The value is an array of strings.
description is the text we want to highlight.
Conclusion
vue-print-nb lets us add a printable area to our Vue app.
link-prevue is a component for adding previews to links.
v-hotkey lets us handle keyboard combos.
vue-input-tag is a tag input component.
vue-text-highlight lets us highlight text.
