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.
