How to create a Single Page Application (SPA) in minutes. Vue.js

hello my name is Maxim today we are going to create a single page application using a starter kit Maximus Spa who will this video be useful for this video will be useful primarily for beginners of front-end development why because you can easily and quickly download the starter kit on your PC set up a development environment and create something great using qgs let's get started I'm in the Maximus Spa Repository here you can find a small documentation you can get acquainted with the features that this starter kit provides also here is a short guide on how to download and set up the code on your PC first of all let's clone the starter kit on our PC I will be using git boss for this purpose iclone the repository now we should enter the folder with our project we can use a CD command or just open the folder on your PC and open a new terminal let's run a npm install command in our terminal this command will download all packages and dependencies needed for the development it can take some time to download all the stuff now what do you need to know to create Spa using this starter kit you need basic knowledge of JavaScript vue.js HTML CSS also you need to download and install node.js on your PC that's it we finish it downloading the packages and dependencies into our project let's drag our project into vs code the next step is generating a basic CSS styling for all future application at the moment there is television CSS on this project this command will generate a new CSS file with all needed CSS classes for our application let's open one more terminal and run the command and Pen run there to start our local server now we can open the application in our favorite browser we have several basic Pages home about registration login forgot password okay let's see if it is easy to create a new page using the current starter kit let's create a new page we'll call it product and include it in the mind navigation all our pages are in The Views folder let's create a new file here the next step is registration over page in our router okay now we should add our new page to the mine menu our main menu is in the components folder here is a navigation view file we added a new item to the my menu and now you can see it in the header of our application let's add some styling to this page we can get components from television CSS website and use it in our project when we added the HTML markup to our file the Telvin CSS server added new classes to all CSS file and we got this beautiful page when you find out how to add a new page to our application let's see how authentication works the authentication is maybe the most painful part of development for front-end Developers it is because you must help again knowledge or hire a person who makes a backend part for you in our case we already have an API that allows us to authenticate our users the api.js contains an API connection to enable authentication using API we should add a new file the dot NV file we must create in the root of our project and add some Global variables now let's try to register I've created a test email for the registration I try to register myself I received a server error it is because I've created a DOT Envy file in the CRC folder let's move this file to the root of the application I'm going to register one more time now I'll enter a wrong password confirmation to see what happens you can now see the error message with appropriate notification let's enter correct confirmation and try one more time we registered successfully and our application sent us a verification email the idea behind a mail verification is to prevent users from accessing protected Pages without verificate email let's verify our email to get access to our dashboard works well let's check the forgot password feature I received an email and now I'll be going to reset my password let's enter our email new password and password confirmation password changed successfully we have to log in one more time to see if it works password reset works well okay we've created a new page we registered and reset the password I think it is good result that's it if you have any questions please leave them in the comments box below thank you

Channel: Maksym Маrkо

Views: 5,307

Keywords: Vue.js, Laravel API, Registration Vue.js, Authentication vue.js

Id: 5HgPEXO4oX4

Length: 10min 39sec (639 seconds)

Published: Thu Feb 02 2023