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 file upload inputs, virtual scrolling, text and array formatting, and more.
Vue File Agent
Vue File Agent is a fast file upload component that gives us preview capabilities.
It also includes drag and drop, validations, and upload progress support.
First, we install it by running:
npm i vue-file-agent
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueFileAgent from "vue-file-agent";
import VueFileAgentStyles from "vue-file-agent/dist/vue-file-agent.css";
Vue.use(VueFileAgent);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<VueFileAgent :uploadUrl="uploadUrl" v-model="fileRecords"></VueFileAgent>
<p>{{fileRecords}}</p>
</div>
</template>
<script>
export default {
data() {
return {
fileRecords: [],
uploadUrl: "https://example.com"
};
}
};
</script>
v-model is bound to the file object. uploadUrl is the URL to upload the file to.
Now we have the drag and drop file upload input displayed.
vue2-filters
vue2-filters provides us with various Vue filters that we can use in our Vue components.
To install it, we run:
npm i vue2-filters
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import Vue2Filters from "vue2-filters";
Vue.use(Vue2Filters);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>{{ msg | capitalize }}</div>
</template>
<script>
export default {
data() {
return {
msg: "hello world"
};
}
};
</script>
We register the plugin and use the provided capitalize filter.
It capitalizes the first letter of each word.
There are also filters for upper case, lower case, placeholders, formatting numbers, and more.
There are also filters that take arguments.
For instance, we can use the number filter:
<template>
<div>{{ 1234567 | number('0,0', { thousandsSeparator: ' ' }) }}</div>
</template>
<script>
export default {};
</script>
There are also filters we can use for organizing arrays.
For instance, we can write:
<template>
<div>
<ul>
<li v-for="user in orderBy(users, 'name')" :key="user.name">{{ user.name }}</li>
</ul>
</div>
</template>
<script>
import Vue2Filters from "vue2-filters";
export default {
mixins: [Vue2Filters.mixin],
data() {
return {
users: [{ name: "james" }, { name: "alex" }, { name: "mary" }]
};
}
};
</script>
We add the mixins from the vue2-filters package so that we can use the orderBy filter.
Then we order by the name property of users .
There are other array filters to find items and more.
vue-axios
vue-axios is a package that lets us add the Axios HTTP client to our Vue app.
To install it, we run:
npm i vue-axios
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(VueAxios, axios);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>{{data.name}}</div>
</template>
<script>
export default {
data() {
return {
data: {}
};
},
async mounted() {
const { data } = await this.axios.get("https://api.agify.io/?name=michael");
this.data = data;
}
};
</script>
We registered the plugin so that we can use Axios by using the this.axios property.
Alternatively, we can use Vue.axios , or this.$http to use Axios.
vue-virtual-scroller
vue-virtual-scroller is a virtual scrolling plugin that we can use to create a virtual scrolling element in our Vue app.
To install it, we run:
npm i vue-virtual-scroller
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import { RecycleScroller } from "vue-virtual-scroller";
Vue.component("RecycleScroller", RecycleScroller);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<RecycleScroller class="scroller" :items="list" :item-size="32" key-field="id" v-slot="{ item }">
<div>row {{item}}</div>
</RecycleScroller>
</template>
<script>
export default {
data() {
return {
list: Array(1000)
.fill()
.map((_, i) => i)
};
}
};
</script>
<style scoped>
.scroller {
height: 100%;
}
</style>
We use the RecycleScroller to load things that are displayed on the screen.
This way, it’s much more efficient than loading everything at once.
Conclusion
vue2-filters provides us with a set of filters to format text and arrays.
Vue File Agent provides us with a file upload input.
vue-axios lets us use Axios in Vue easily
vue-virtual-scroller gives us a virtual scrolling box to load items to only when they are shown on the screen.
