Vue.js - Introduction and Installation - 2021

Today’s topic is the installation of Vue.js. Gone are the days when skills with HTML and CSS could get you a job with front end development. The world is moving to JavaScript and it’s high time you do too. JavaScript frameworks like React, Angular, Ember, and Vue are extensively being used in making modern web apps. Of all these beautiful options my favorite is Vue.js. In this article, we will be having an introduction to Vue and also look at a very easy installation process to set it up.

What is Vue.js?

Vue Js is a JavaScript framework that can be used to create modern websites and web apps. Vue Js is extremely popular and used by companies like Alibaba and Adobe. VueJs is extremely fast and flexible. It has a growing ecosystem of various libraries and packages that enable quick development. If it matters to you, Vue also has grown exponentially in popularity on GitHub among developers.

Installing Vue.js

VueJs can be included in your HTML files via Cd you can use the following code for the same.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

However, I highly suggest you go the longer route and set up your project with npm and nodejs.

You can refer to the following article to install nodejs and npm on your system. Once you are done with that we can install Vue’s command line interface with the following command.

npm install -g @vue/cli

Or, if you have a Linux system simply add sudo before the command.

sudo npm install -g @vue/cli

That is pretty much it, easy wasn’t it. No we need to create a project and this is where it gets a little complicated but don’t worry just follow as I say.

Creating your first Vue.js project

Once your vue cli is installed, you can begin creating your first vue js project. It is as simple as typing the following command.

vue create theitstuff

Here, you can replace theitstuff with any name of your choice. You will then be greeted with the following message.

We will go with manually selecting features. Just hit enter and the next set up options will show up.

It has many options for our projects, but for now. We will simply go with Babel, Router, and Vuex. You can use arrow keys to go to a particular selection and space key to check uncheck options.

The cli will now ask you whether you wish to use history mode for the router. For now, just click on Y to allow the history mode. We will discuss this later in the routing section.

Next, the cli will ask you where should it place the configurations for various features. Just leave it to default and hit enter.

Finally, it will ask whether you want to save your currently chosen settings as a preset for future projects. Hit N for now. The cli will do some processing and downloading work. It should take no more than a minute or two at best. Once the processing is done. You should see similar output.

Our project has been set. Now, all we gotta do is start it. We will simply use the commands given at the end of the terminal screen.  For this, we will cd into the folder and run npm run serve.

This will take some time but in under a minute, you should see the following output on your terminal.

You can see that the app is running at localhost port 8080. Now, we can open our web browsers to see our vue project. Simply browse to localhost:8080 and you should see something similar.

Congratulations, if you’ve followed all the steps you should see a webpage like the one above. You have successfully created your first vue project.

Conclusion

Vue.js is a modern-day framework for building websites and web apps. It is extremely easy to set up. Experience with nodejs and npm is greatly helpful in working with vue. We just created our first vue app and launched it in our browsers. I hope you have followed everything up until now. If you get stuck anywhere let me know in the comment section and I’ll be there for you. Also, check out other articles from this series where we learn more about vue.