VueJs Libraries
VueJs out of the box comes with a few libraries that help in its functionalities, and yet, most of the time, this is not enough and thus would require that you add a few more libraries if you want your web application to do a lot. You might want to do a form validation, routing, manage state, show a toast or give the user a nice tour of your application. And to make this possible, you need to install some libraries for this kind of functionality. In this article I am going to talk about some of the most basic libraries you would need, to make this a possibility. Let's get right into it 👌🏽.
Basic Libraries 🤩
There are some basic libraries you need to help you during routing, managing state, and handling HTTP requests, find them below :
VueX : VueX is a library used to manage state in your web application. Some people call it The single source of truth. So essentially regarding the storage place of your application data, VueX allows you to mutate state and perform some actions based on the current state of a component. You can read on the documentation and installation here VueX Docs .
Vue Router : Thinking about how users can move between different pages of your application? Or how to map components to particular routes? Well the Vue Router is the answer. It allows you to create simple to complicated routes. Find documentation and installation instructions here Vue Router .
Axios : The internet basically revolves around HTTP requests, fetching some data or sending some data. Do you want to post some login data or simply fetch some data from your backend or the internet? Axios allows you to perform HTTP requests in your application. This library provides you with all that you need to get data, post data, edit data and delete data from your backend. Documentation available here: Axios
Libraries for form data and validation 🧐
Vuelidate : Form validation! The significance of this cannot be emphasised enough! Vuelidate is the best library for validating forms. With just a little bit of configuration, you can easily add validation to form inputs and display error messages to the user. It comes with methods to check for a minimum length of an input, email validation, matching passwords and a whole lot. Documentation available here: Vuelidate .
Vue Form Wizard : Have you ever had to collect user input and realized the form could just not fit on a single page? So you decided to break your form down into various sections right? Well, Vue Form Wizard allows you to create a form with multiple steps and also enables you to submit the data in bulk on click of the final button. It's easy to use and setup and you find the documentation here: Vue Form Wizard
Additional Libraries to improve user experience 👌
Sweet Alert2 : Do you want to show a success modal? Or an error modal ? Or perhaps a confirm modal ? Sweet Alert 2 helps you achieve this, keeps your page interactive and user friendly. You can find the documentation here: Sweet Alert and yeah you should try it out ✌🏽
Vue Toastification : A user logs in with a wrong password and you want to pop a message up or payment is successful and you want to show that. Look no further, Vue Toastification gives you the option of showing beautifully crafted toasts to your users. Find the documentation here: Vue Toastification
Vue Tour : Are you wondering how to show users around? How to build a simple tutorial tool that shows users the functionality of your web application? Vue Tour gives you that option. You can quickly install and configure steps that give a user an overview of your web application. Great user experience right? Read the documentation here :Vue Tour
Vue Meta : SEO (Search engine optimisation) must be taken into consideration when building your application. Vue is rendered in Javascript and most of the time, the crux of the matter is that when search engine crawlers try to get data from your application, they would most likely get an empty HTML page since the page takes time to render the Javascript. There are different ways to solve this but I recommend Vue Meta since it is easy to get started with. This will help you solve a part of your SEO concerns quickly by allowing you to add meta data to your application. Documentation right here: Vue Meta
Vue Persisted State : At times or probably most times, you would need to store tokens or user ID's in your browser local storage. You might also want to persist state, as in, keep the state of data in order to manipulate certain behaviours. Vue Persisted State allows you to do these, thus you need VueX for this particular library. Find the documentation here: Vue Persisted State
That would be it for now. Hope you had a good read. Cheers! 😁😁😁