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.

generate project in current directory
generate project in the current directory

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.

pick a preset - setup vue js
pick a preset

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

web
web

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:

npm run serve
npm run serve

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

vue js
Vue js

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.