Top Vue Packages for Infinite Scrolling, Displaying Toasts, and Add a Flexbox Grid
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:20:28

---
title: Top Vue Packages for Infinite Scrolling, Displaying Toasts, and Add a Flexbox Grid
published: true
date: 2020-07-26 23:45:53 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/26/top-vue-packages-for-infinite-scrolling-displaying-toasts-and-add-a-flexbox-grid/?utm_source=rss&utm_medium=rss&utm_campaign=top-vue-packages-for-infinite-scrolling-displaying-toasts-and-add-a-flexbox-grid
---

**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 infinite scrolling, displaying toasts, and adding a flexbox grid.

### vue-infinite-loading

We can add infinite scrolling to our app with the vue-infinite-loading package.

To add it, we run the following to install the package:

```
npm i vue-infinite-loading

```

Then we can use it by writing:

```
<template>
  <div>
    <div v-for="n in num" :key="n">{{n}}</div>
    <infinite-loading @infinite="infiniteHandler"></infinite-loading>
  </div>
</template>

<script>
import InfiniteLoading from "vue-infinite-loading";

export default {
  components: {
    InfiniteLoading
  },
  data() {
    return { num: 50 };
  },
  methods: {
    infiniteHandler($state) {
      this.num += 50;
      $state.loaded();
    }
  }
};
</script>

```

We add register and use the `infinite-loading` component to load more data.

It emits the `infinite` event which we listen to with the `infiniteHandler` .

It has a `$state` parameter, which we call `loaded` to indicate that we loaded what we want to display as we scroll.

We just loop through some numbers from 0 to `num` , which is updated by the `infiniteHandler` method.

If we don’t want to load more items, we can call `$state.complete` .

So we can write:

```
<template>
  <div>
    <div v-for="n in num" :key="n">{{n}}</div>
    <infinite-loading @infinite="infiniteHandler"></infinite-loading>
  </div>
</template>

<script>
import InfiniteLoading from "vue-infinite-loading";

export default {
  components: {
    InfiniteLoading
  },
  data() {
    return { num: 50 };
  },
  methods: {
    infiniteHandler($state) {
      if (this.num === 200) {
        $state.complete();
        return;
      }
      this.num += 50;
      $state.loaded();
    }
  }
};
</script>

```

Now we stop updating when `this.num` is 200.

This means there’s no more infinite scrolling with `this.num` is 200.

### vue-grd

If we’re having trouble with flexbox, we can use vue-grd to make flexible work with our Vue app.

To install it, we run:

```
npm i vue-grd

```

Then we can write:

```
<template>
  <div>
    <vue-grid align="stretch" justify="start">
      <vue-cell width="fill">fill</vue-cell>
      <vue-cell width="5of12">5of12</vue-cell>
      <vue-cell width="3of12">3of12</vue-cell>
    </vue-grid>
  </div>
</template>

<script>
import { VueGrid, VueCell } from "vue-grd";

export default {
  components: {
    VueGrid,
    VueCell
  }
};
</script>

```

to create a flexbox container with `vue-grid` .

Then we have `vue-cell` to add the contents into the flexbox container.

The container has 12 columns, so we can change the width with strings like 5of12 or 3of12 to fill 5 of the 12 columns and 3 respectively.

`fill` fills the remaining space with the content in the `vue-cell` .

`justify` works the same way as the justify in CSS.

We can layout our time at the ends, with space in between, etc.

### vue-material-checkbox

vue-material-checkbox lets us add a Material design style checkbox easily.

To install it, we write:

```
npm i vue-material-checkbox

```

Then we can use it by writing:

```
<template>
  <div>
    <Checkbox v-model="val" :value="42">My Checkbox</Checkbox>
    <p>{{val}}</p>
  </div>
</template>

<script>
import Checkbox from "vue-material-checkbox";

export default {
  components: { Checkbox },
  data() {
    return { val: undefined };
  }
};
</script>

```

The `Checkbox` component binds to the `val` state.

It’s set to `true` if it’s checked and `false` otherwise.

We can set the color, disabled, required attribute, size, font size, and more options.

### vue-toasted

We can display toasts with the vue-toasted plugin.

To install it, we run:

```
npm i vue-toasted

```

Then we can use it by writing:

`main.js`

```
import Vue from "vue";
import App from "./App.vue";
import Toasted from "vue-toasted";

Vue.use(Toasted);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

```

`App.vue`

```
<template>
  <div></div>
</template>

<script>
export default {
  mounted() {
    this.$toasted.show("hello");
  }
};
</script>

```

We register the plugin and then display a toast.

We can add actions to toasts.

For instance, we can write:

```
<template>
  <div></div>
</template>

<script>
export default {
  mounted() {
    this.$toasted.show("hello", {
      action: [
        {
          text: "Cancel",
          onClick: (e, toastObject) => {
            toastObject.goAway(0);
          }
        },
        {
          text: "Undo",
          push: {
            name: "/",
            dontClose: true
          }
        }
      ]
    });
  }
};
</script>

```

We pass in an object that lets us add some links to the toast.

The first is a cancel button.

We call `goAway` to make it go away. The argument is the delay in milliseconds.

The 2nd one is one that lets us navigate to a route.

`name` has the route path from Vue Router.

### Conclusion

vue-infinite-loading is an easy to use package to let us add infinite scrolling to our app.

vue-toasted lets us display toasts in our app.

vue-material-checkbox lets us display a checkbox.

vue-grd lets us create a flexbox grid without our own CSS.

The post [Top Vue Packages for Infinite Scrolling, Displaying Toasts, and Add a Flexbox Grid](https://thewebdev.info/2020/07/26/top-vue-packages-for-infinite-scrolling-displaying-toasts-and-add-a-flexbox-grid/) appeared first on [The Web Dev](https://thewebdev.info).