2. Setup Vue JS

In the previous chapter, we did the installation of our project and Node JS server. In this chapter, will setup Vue JS single-page application.

Video tutorial:

First, you need to install the Vue JS CLI. Open your CMD and run the following command:

// install vue cli in your system
> npm install -g @vue/cli

Vue CLI is responsible for creating and running the Vue JS app locally. When all the development and testing are done, we can simply create a build for production using this CLI and upload it to your server to make it live.

Then open the terminal in your web folder and run the following command in it:

// create vue SPA project in current directory
> vue create .

This command is used to create the Vue JS project in the current directory (notice the dot at the end). First, it will ask you to either create the project in the current directory, you need to type “Y” and hit enter.

Then it will ask for preset. You will have 3 options:

1. Vue 3
2. Vue 2
3. Manually select features

I would suggest Vue 3, so I will keep the cursor on Vue 3 using the up/down arrow keys and hit enter.

It will take some minutes for installing the project and after the installation is done, your web folder should look like this:

Run the following command in the web folder to start the Vue JS app in localhost:

// start the app locally
> npm run serve

This will take a few seconds and after that, your CMD will look like this:

You can access your frontend from the browser with this URL: http://localhost:8080 and right now you will see something like this:

Congratulations! You have created your first Vue JS Single Page Application. Now we are going to create navigation links, registration forms, etc.

Conclusion

In this chapter, we have set up a Single Page Application using Vue JS CLI and ran it on localhost.