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 adding fragments, icons, download JSON data as Excel files, and detecting idle and resizing.
vue-fragment
vue-fragment lets us render fragments in Vue apps.
A fragment is a component that doesn’t render any wrapper element.
To use it, we run:
npm i vue-fragment
to install it.
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import { Plugin } from "vue-fragment";
Vue.use(Plugin);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<fragment>
<p>hello</p>
</fragment>
</div>
</template>
<script>
export default {};
</script>
Vue Material Design Icon Components
Vue Material Design Icon Components is a package with Material Design icons that we can use.
To use it, we run:
npm i vue-material-design-icons
to install it.
Then we use it by writing:
<template>
<div id="app">
<menu-icon/>
</div>
</template>
<script>
import MenuIcon from "vue-material-design-icons/Menu.vue";
export default {
components: {
MenuIcon
}
};
</script>
We import the icon component so that we can use it in our template.
Also, we can change the size:
<template>
<div id="app">
<menu-icon :size="48"/>
</div>
</template>
<script>
import MenuIcon from "vue-material-design-icons/Menu.vue";
export default {
components: {
MenuIcon
}
};
</script>
vue-json-excel
JSON to Excel for VUE 2 is a package that lets us convert JSON data to Excel files and download it.
To use it, first we install it by running:
npm i vue-json-excel
Then we can use it by writing:
<template>
<div id="app">
<download-excel name="filename.xls" :fields="jsonFields" :data="jsonData">Download Data</download-excel>
</div>
</template>
<script>
export default {
data() {
return {
jsonFields: {
"first name": "name",
phone: {
field: "phone.landline",
callback: value => {
return `landline Phone - ${value}`;
}
}
},
jsonData: [
{
name: "james",
phone: {
landline: "(541) 754-3010"
}
},
{
name: "alex",
phone: {
landline: "(463) 582-2244"
}
}
]
};
}
};
</script>
We use the download-excel component to add an element that downloads some JSON to our computer.
name is the file name,
fields is the fields that we have as headings.
It’s an object with the key being the heading. The value is a property in our jsonData array entries.
It can also be a callback that formats the data the way we like.
If it’s nested, then we need to specify the field property with the path to the property.
jsonData is the data we want to have in our Excel file.
The fields can be any structure.
idle-vue
idle-vue is a Vue plugin that can detect situations when a user hasn’t interacted with our app in a while.
To use it, we can install it by running:
npm i idle-vue
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import IdleVue from "idle-vue";
const eventsHub = new Vue();
Vue.use(IdleVue, {
eventEmitter: eventsHub,
idleTime: 2000
});
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
We register the plugin by passing in an object with the eventEmitter property set to a new Vue instance.
This lets us send app-wide events.
idleTime lets us set the idle timeout in milliseconds.
The idle event will be emitted when the timeout is up.
App.vue
<template>
<div id="app">{{messageStr}}</div>
</template>
<script>
export default {
data() {
return {
messageStr: ""
};
},
onIdle() {
this.messageStr = "idle";
},
onActive() {
this.messageStr = "hello";
}
};
</script>
vue-resize-sensor
vue-resize-sensor is a Vue plugin that detects element resizing.
We install it by running:
npm i vue-resize-sensor
Then we can use it by writing:
<template>
<div id="app">
<resize-sensor @resize="resize"></resize-sensor>
</div>
</template>
<script>
import ResizeSensor from "vue-resize-sensor";
export default {
components: {
ResizeSensor
},
methods: {
resize({ width, height }) {
console.log(width, height);
}
}
};
</script>
We use the resize-sensor component.
Whenever the component resizes, resize is called.
Conclusion
vue-fragment is a component that lets us add wrapper components that don’t render anything.
Vue Material Design Icon Components provides us with icons we can use in our Vue app.
vue-json-excel lets us download JSON data as Excel spreadsheets.
idle-vue lets us detect when a Vue app is idle.
vue-resize-sensor lets us detect resizing of elements.
