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 the best packages for checking network status, particle background, checkboxes and radio buttons, and infinite scrolling.
Vue Offline
Vue Offline is a good plugin for detecting whether a Vue app is online for offline.
To use it, we run:
npm i vue-offline
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueOffline from "vue-offline";
Vue.use(VueOffline);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<p v-if="isOnline">online</p>
<p v-if="isOffline">Toffline</p>
</div>
</template>
<script>
export default {
mounted() {
this.$on("offline", () => {
console.log('offline')
});
}
};
</script>
We register the plugin., Then we can use the isOnline and isOffline properties to check whether the app is online or offline.
Also, we can use the $on method to listen to network status changes.
We can also save data to local storage to make the data available offline.
To save the data, we can write:
<template>
<div>
<p v-if="isOnline">online</p>
<p v-if="isOffline">Toffline</p>
</div>
</template>
<script>
export default {
mounted() {
this.$offlineStorage.set("user", { foo: "bar" });
}
};
</script>
We use the this.$offlineStorage.set method to save the data.
The first argument is the key and the 2nd is the value.
We can use this.$offlineStorage.get to get the value by the key.
vue-particles
We can use vue-particles to display a particles background in our Vue app.
To use it, we run:
npm i vue-particles
to install the package.
Then we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueParticles from "vue-particles";
Vue.use(VueParticles);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<vue-particles color="#dedede"></vue-particles>
</div>
</template>
<script>
export default {};
</script>
to use it.
We have the vue-particles component to display the background.
color is the color of the particles.
There are many other things we can customize.
Line colors, width, opacity, distance, speed, opacity, all can be customized.
vue-checkbox-radio
vue-checkbox-radio lets us add radio buttons or checkboxes to our Vue app.
To use it, we run:
npm install vue-checkbox-radio --save
to install it.
Then we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import CheckboxRadio from "vue-checkbox-radio";
Vue.use(CheckboxRadio);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<checkbox name="agree" v-model="agree" value="1">
I agree to the
<a href="#">terms</a>
</checkbox>
</div>
</template>
<script>
export default {
data() {
return { agree: false };
}
};
</script>
to use it.
checkbox is the component for adding the checkbox.
The content between the tags will be the content beside the checkbox.
name is the name attribute of the checkbox.
v-model binds the checked value to the agree state.
We can also add radio buttons with it.
To do that, we write:
<template>
<div>
<radio name="robot" value="1" v-model="isRobot">I'm a robot</radio>
<radio name="robot" value="0" v-model="isRobot">I'm not a robot</radio>
<p>{{isRobot}}</p>
</div>
</template>
<script>
export default {
data() {
return { isRobot: false };
}
};
</script>
We just bind v-model to the same state and it’ll be set when we check it.
The name attribute of one set of checkboxes will have the same name.
vue-mugen-scroll
vue-mugen-scroll is an infinite scrolling library for Vue apps.
To use it, we can install it by running:
npm i vue-mugen-scroll
Then we write:
<template>
<div id="app">
<div class="list">
<p v-for="n in num" :key="n">{{n}}</p>
</div>
<mugen-scroll :handler="fetchData" :should-handle="!loading">loading...</mugen-scroll>
</div>
</template>
<script>
import MugenScroll from "vue-mugen-scroll";
export default {
data() {
return { loading: false, num: 50 };
},
methods: {
fetchData() {
this.loading = true;
this.num += 50;
this.loading = false;
}
},
components: { MugenScroll }
};
</script>
to add infinite scrolling to our component.
We put whatever needs infinite scrolling above the mugen-scroll component so that it watches the scroll position and load more data if needed.
handler is the prop for the method to fetch data.
should-handle is the state that loads the handler.
Conclusion
vue-mugen-scroll lets us add infinite scrolling.
Vue Offline lets us check network status in a Vye app.
vue-particles lets us create a particle background.
vue-checkbox-radio lets us add checkbox or radio buttons.
