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 watching element resizing, display relative time, adding split panes, and copying data to the clipboard.
Vue.resize
Vue.resize is a package that lets us detect HTML resize events.
To install it, we run:
npm i vue-resize-directive
Then we can use it by writing:
<template>
<div id="app">
<div
v-resize="onResize"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec elit ornare, sollicitudin lacus vel, volutpat ipsum. Aliquam vel erat sodales, faucibus dolor vel, ultricies augue. Morbi a posuere eros. Nulla bibendum tristique massa vel volutpat. Aenean in odio erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam eros dolor, viverra ac arcu ac, venenatis commodo lectus.</div>
</div>
</template>
<script>
import resize from "vue-resize-directive";
export default {
directives: {
resize
},
methods: {
onResize(e) {
console.log(e);
}
}
};
</script>
We register the directive and use the v-resize directive.
We can throttle or denounce the listeners being called.
vue-numeric
vue-numeric is an input field component to display a formatted currency value.
To use it, we run:
npm i vue-numeric
Then we can use it by writing
<template>
<div>
<vue-numeric currency="$" separator="," v-model="price"></vue-numeric>
<p>{{price}}</p>
</div>
</template>
<script>
import VueNumeric from "vue-numeric";
export default {
name: "App",
components: {
VueNumeric
},
data() {
return {
price: ""
};
}
};
</script>
We use the vue-numeric component.
The currency is the currency symbol to display on the left.
separator is the thousands separator.
v-model binds the inputted value to the price state.
We can also change the precision, enable or disable negative values, and more.
Vue Split Pane
Vue Split Pane is a component that lets us display split panes.
To install it, we run:
npm i vue-splitpane
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import splitPane from "vue-splitpane";
Vue.component("split-pane", splitPane);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<split-pane v-on:resize="resize" :min-percent="20" :default-percent="30" split="vertical">
<template slot="paneL">left</template>
<template slot="paneR">right</template>
</split-pane>
</div>
</template>
<script>
export default {
methods: {
resize() {}
}
};
</script>
We use the split-pane component by populating the bundled slots with our own content.
panelL is the left panel.
panelR is the right panel.
The panes can be nested.
v-clipboard
v-clipboard is a plugin that lets us copy the content that we want from our Vue app to the user’s clipboard.
To install it, we run:
npm i v-clipboard
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import Clipboard from "v-clipboard";
Vue.use(Clipboard);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<button v-clipboard="value">Copy to clipboard</button>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: "foo"
};
}
};
</script>
Whatever we passed into the v-clipboard directive will be copied.
It also emits success and error events.
We can listen to them by writing:
<template>
<div id="app">
<button
v-clipboard="value"
v-clipboard:success="clipboardSuccessHandler"
v-clipboard:error="clipboardErrorHandler"
>Copy to clipboard</button>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: "foo"
};
},
methods: {
clipboardSuccessHandler({ value, event }) {
console.log("success", value);
},
clipboardErrorHandler({ value, event }) {
console.log("error", value);
}
}
};
</script>
We can also use the this.$clipboard property to the copying:
<template>
<div id="app">
<button @click="copy">Copy to clipboard</button>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
value: "foo"
};
},
methods: {
copy() {
this.$clipboard(this.value);
}
}
};
</script>
vue-timeago
vue-timeago is a component that lets us display relative time from today.
To install it, we run:
npm i vue-timeago
Then we can use it bu writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueTimeago from "vue-timeago";
Vue.use(VueTimeago, {
name: "Timeago",
locale: "en"
});
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<timeago :datetime="time"></timeago>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
time: new Date(2020, 1, 1)
};
}
};
</script>
We register the plugin and set the locale as we do it.
Then we can use the timeago component.
The datetime prop is passed in to calculate and display the relative time from today.
Conclusion
Vue.resize lets us watch for element resize events.
vue-numeric is a numeric input for entering currencies.
Vue Split Pane lets us create split panes with ease.
v-clipboard is a plugin for letting users copy data to the clipboard.
vue-timeago lets us display relative time from today.
