How To Create a New VueJS Application?

How To Create a New VueJS Application

Getting a new VueJs application is a pretty straightforward process. There are multiple ways to create a New VueJS application out of which, we will create a new VueJS app via the VueJS CLI. The reason for going with this approach is the fact that this process is quite simple yet flexible in setting up the entire VueJs web application within minutes.

For this approach, we will need to have the following installed:

  • Node
  • yarn

Prerequisites for Creating a New VueJS Application For The First Time

If you don’t already have node installed, download and install it first, from the official link, here. After Node is installed, run the following command to verify a successful installation.

npm --version
The version number verifies a successful installation

Next, you will need to install yarn. You can install the same using the following command:

npm install -G yarn

This approach sometimes gives the following error:

bash: yarn: command not found

A quick workaround to this problem is, that I run the following code instead of updating the $PATH, on a Mac.

brew install yarn

Once installed, create a new folder for your project and cd into that directory. In my example above, I had already created a new folder and was running the terminal inside that folder.

You can now proceed to install the VueJs CLI using the command below:

yarn global add @vue/cli
Once successfully installed, your terminal should look something like this

At this point, we are ready to create our project folder. Let’s do that by running the following command:

vue create testapp

Now, when you run this command on the terminal, you will be prompted to choose between certain options that you will have to switch between by using the arrow keys on your keyboard. For some reason, my favorite terminal on windows, GitBash has trouble handling this. So, from here on, for the sake of this project, I am switching to Powershell. So, don’t get confused seeing a different terminal in the screenshots below.

If you are Mac, you should be fine

Choose Vue 3, the second option here

After a while, you should see something like the screen below, confirming that our new VueJS project has been successfully created.

Our testapp project being created

Now it’s time to run it in the browser.

To be able to do that, you have to cd inside our testapp project folder and then run one of the two following commands:

yarn serve


npm run serve

This should give you 2 URLs for you to use in your browser to be able to access the app.

Use one of the 2 URLs that you see, in your browser

In the browser, this is what your newly created VueJs Application should look like.

The New VewJS app running in the browser


While there’s nothing really unique in this app that you can’t yourself create within minutes, by following the tutorials, you can always download this vanilla VusJS project from the GitHub repo, here.

Share This Post

Leave a Comment

Your email address will not be published. Required fields are marked *

Subscribe To my Future Posts

Get notified whenever I post something new

More To Explore