Vue is a JavaScript front end framework in line with React and Angular, and it is my preferred front end framework. In this article, ill show you how to install the Vue cli, create your first Vue project, and start up the app so you can browse it on your machine.

To follow along, you should have the following installed;

  • Nodejs
  • VSCode

The Vue CLI was created to make bootstrapping (or setting up) Vue projects dead simple. With a single command, you can create a shell of an application to get in and start building. Install the Vue cli by running the following command in your terminal;

npm install -g @vue/cli

Once installed, create a Vue app with the following command;

vue create my-app

You’ll be prompted by a set of options, pick the default and hit enter.

https://cdn.brianmorrison.me/media/2020/dc235bf2-9051-4018-a8b6-c16a3695100c

Wait a few minutes and your app will be ready to start working on.

https://cdn.brianmorrison.me/media/2020/47128715-3f70-40d7-b14b-2434910f706e

Running Locally

The default app that's created comes with a mini web server that you can use to test changes to your app. You can run the app by issuing the following command in the terminal;

npm run serve

https://cdn.brianmorrison.me/media/2020/a5866af6-5758-4b21-b1b7-40958bc1c465

By default, the app will run on port 8080. If something else is running on that port, it will increment up (ie; 8081, 8082, etc) until it finds a port to run on. Make sure to check the terminal to find the port. Assuming we're running on 8080, head over to your browser and enter http://localhost:8080 and you should see the following.

https://cdn.brianmorrison.me/media/2020/4eb9943b-7073-4f11-bd98-945f56d9783c

The web server will also automatically reload your app whenever you make changes. To do this, lets head into App.vue and update the title from "Welcome to Your Vue.js App" to "Hello From My Vue App!" and save the file. If you have your browser still up, you should notice the page automatically refresh after the changes are made.

https://cdn.brianmorrison.me/media/2020/cf3f8fd1-a8ef-4cea-8f19-127ae8e28e45

Now you're setup to start building your new Vue app! This is the first of a series of articles I'll be writing on building apps using Vue. Keep an eye out for the next one.

Happy coding! 😎