Vue.js Login Component with Spinner | vue login page
ThecodeisavailableinaGithubrepository[1]InthispostIwillshowyou,howtocreateaLoginComponentinVue.js.TosimulateaRESTfulAPItoconnectto,Iwillusereqres[2](morespecificthePOST/api/loginroute).TheComponentwecreateshoulddothefollowingLetusloginbyenteringanE-MailandaPasswordfollowedbysubmittingtheform WhilethePOSTrequestissenttothebackend,aspinnershouldbeoverlayingtheform IfthePOSTrequestwassuccessful(Statuscode2XX),asuccessmessageshouldbedisplayed IfthePOSTrequestwasnotsuccessful(Statusco...
The code is available in a Github repository[1]
In this post I will show you, how to create a Login Component in Vue.js.
To simulate a RESTful API to connect to, I will use reqres[2] (more specific the POST /api/login route).
The Component we create should do the following
Let us log in by entering an E-Mail and a Password followed by submitting the form While the POST request is sent to the backend, a spinner should be overlaying the form If the POST request was successful (Statuscode 2XX), a success message should be displayed If the POST request was not successful (Statuscode 4XX), the error message from the backend (response) should be displayed How will we accomplish thisTo accomplish this, a variety of technologies working together will be used, such as
Install the Vue CLIIf you didnt install the Vue CLI yet, install it
sudo npm install -g @vue/cli Create a new ProjectCreate a new Projec...