Top Vue Packages for Adding File Upload Inputs, Virtual Scrolling, and Text Formatting
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:21:10

---
title: Top Vue Packages for Adding File Upload Inputs, Virtual Scrolling, and Text Formatting
published: true
date: 2020-07-27 19:55:32 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/27/top-vue-packages-for-adding-file-upload-inputs-virtual-scrolling-and-text-formatting/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-adding-file-upload-inputs-virtual-scrolling-and-text-formatting
---

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

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.

The post [Top Vue Packages for Adding File Upload Inputs, Virtual Scrolling, and Text Formatting](https://thewebdev.info/2020/07/27/top-vue-packages-for-adding-file-upload-inputs-virtual-scrolling-and-text-formatting/) appeared first on [The Web Dev](https://thewebdev.info).