Hello World With VueJs - A Beginners Guide

Sun Apr 15 2018

Paul Shan

If you have worked with any other javascript frameworks earlier; then, switching to Vue.js won’t be a time consuming task. It is very easy to learn and easier to work with. In this article we will guide you to take your first step in VueJs, hopefully our step by step Vue.js guide will make your first day with VueJs productive and smooth.
You will be needing some knowledge of HTML, CSS and JavaScript to start your journey with Vue, I am assuming you have that basic knowledge. So Let’s start knowing VueJs from the very bottom of it.

What is Vue.js?

Vue.js is one of the fastest growing javascript frameworks; improving the UI interaction and increasing the efficiency. This intuitive framework made web app development quite easier and faster by decreasing the complexity. The core Vue library is presently focused on the user interface only and It also integrates with other plugins or libraries perfectly.

Why do we need Vue.js?

When there are dozens of well-built javascript frameworks available in the market, why should one learn Vue.js? Well, people may have different opinions; but for me, there are two major reasons behind choosing Vue.js. Simplicity and Speed.

The Simplicity of Vue.js:

Vue is an approachable framework. One with the knowledge of HTML, CSS and Javascript can hit the ground running very quickly. jQuery did the similar thing in the year of 2006 when it was launched and today it is one of the most popular javascript libraries people use. The reason behind its popularity is the simplicity it provided to the developers. It empowered people to effortlessly do amazing-cool things focusing on the problem solving area without worrying about the design pattern, tool changing or other complexity. So why should you learn Vue when jQuery is so perfect and easy?

When the app or web page grows it becomes more complex which can make it very difficult to maintain. Vue helps fight this complexity by focusing on component architecture, template support with bindings and an HTMLlistic touch.

Template with data-binding is a vital part of Vue.js. It separates the data-business logic from the user interface and also help to display the changed data automatically in the UI.

Now the million dollar question is, why vue when the same things are done by the great frameworks like Angular and React. Well, this post compares vue with other frameworks, you can have a look. But my personal opinion is it is neither complex like React, not heavy and slow like Angular. Vue somewhere falls in betweens, which is really amazing.

Speed of Vue.js:

Web apps developed on Vue.js start fast and run faster. The reasons behind the impressive speed are the size of it and the virtual DOM concept. Yeah, you heard it right; virtual DOM; just the react way. As I said earlier, vue is a mixture of react and angular.

So, the library is small, have taken React’s proven concepts to make the rendering fast. So overall a very handsome speed and way less complex than react.

Setup The Project

It takes less than a minute to set up the VueJs project. You can try these two approaches. Either you can directly include the library in tag of your page or you can use the CLI.

Including The library in the page

This one is the easiest way you can try. All you have to do is include this
at the bottom of your body. The version I mentioned here is 2.3.16, but you can use any stable release.

Using CLI

CLI is preferable when you are developing a bigger or even a medium size app, also helpful for give your project a quick start. You can check their official documentation about Vue CLI.
Here we are providing you the basic process for installing the Vue CLI and how you can work with this pre-configured project. Follow the steps below to install and setup your project.

//install vue-cli  (one time step)
$ npm install --global vue-cli

//create a new project using the "webpack" template  
$ vue init webpack my-project  

//install dependencies and go!  
$ cd my-project
$ npm run dev

The steps above will ask you questions while setting up the project, whose answers will be as per your preference; but in case you need a reference here is how I answered them.

VueJs CLI Setup

Writing Your First Code With Vue.js

We will learn how to write ‘Hello World!’ using Vue.js. We have categorized this into two processes, both achieves the same target (result). The first process which we call the old school way lets you write your code instantly without bothering about architecture. The problem with this approach is as your project gets bigger, managing it will be more complex. On the other hand, the second process is the CLI approach which will provide you a pre-configured project so that you can directly jump into the coding, but in a structured way. Excited to write your first Vue code? Lets get started.

I will recommend you to go with the flow, read the old school way before you start doing it with the Vue CLI.

The Old School Way

This is the final section of this introductory article on Vue. In this section we will learn how to display ‘Hello World’ using VueJs.

This is our template. We have declared a div with the id app. We want to put ‘Hello World!’ inside the div. How to do it? Okay, before we jump into that lets learn how to create a simple vue.js component and define template and data property.

var  app  =  new  Vue ({
	el:  '#app',
	data: {
		heading:'Hello World!'
	},
	template: '

{{heading}}

' });

app is an instance of the Vue class. The el property determines on which element of the DOM this instance will append.
The data property will contain the data to be used in the template. Any data property can be accessed from the template.

The above code will append the vue component to the div with id #app and thus its compiled template will be found inside the parent div and you will see Hello World.

Hello world using VueJs

Add CSS to The Code

We use the v-bind directive for binding data property to HTML attributes. Mustache syntax ({{}}) can’t be used inside an HTML attribute. We are using v-bind directive to bind inline CSS properties or style properties.

var  app  =  new  Vue ({
	el:  '#app',
	data: {
		heading:'Hello World!',
		headingColor: 'red'
	},
	template: '
{{heading}}
' });

Take a look at the above code. We have added a headingColor property to the data object and have accordingly used the same in the template to make the font color red.

Anyway, rather that adding style element it is always preferred to use classes. So similarly if your css files have a class, suppose bgYellow and you want to use it in a vue component, you need to do something like the following.

.bgYellow{
	background-color:yellow
}

.

var  app  =  new  Vue ({
	el:  '#app',
	data: {
		heading:'Hello World!',
		bgYellow: 'bgYellow'
	},
	template: '
{{heading}}
' });

The CLI Approach

This approach is more preferable and acceptable when you are working on any real life project as it reduces the complexity and helps managing the project in a better way. All your css, template and JavaScript code is segregated by default here.

Hope you have successfully completed the project setup as mentioned earlier. We are using vue’s official cli and its project here, there are more available in the internet which you can try or you can develop your own from the very scratch.

Now open the project in your code editor. Open the folder src, you will find a file there named main.js which is the entry point. We will talk about it later on. Now take a look at the App.vue file. A .vue file contains the template, script and style for a particular component which is later on compiled to a vue component by webpack.

Make sure your template has only one single root element (i.e. everything inside a single div or similar tag) else it will generate error.

Now if we come back to the main.js file we will find it is importing Vue from the module vue(which is an npm module). It then imports App from the file App.vue. So whatever component you created inside App.vue file, it is there with the variable App in main.js now.

Now if you look ay the Vue component or instance in the same file, you will find it has two major properties components and template.
In components, we are defining the map to those components which we are going to use in its template. Like, the App component.
So App component is now inside the component created in main.js which is finally attached in the page element whose id is #app. Thus, whatever you created in App component are now in your html page.

Writing Hello World

I would say, you have already come to know how things are handled in the project, scaffolded by the vue cli. To write a hello world text you can simply modify the App.vue component. Or I would say create a new component called Hello.vue and call it from main.js. And lets create the css as well for it.

Hello.vue


  
{{heading}}
export default { name: 'HelloWorld', data () { return { heading: 'Hello World', bgYellow: 'bgYellow' } } } .bgYellow{ background-color: yellow; }

main.js

import Vue from 'vue'
import HelloWorld from './HelloWorld'

new Vue({
  el: '#app',
  router,
  components: { HelloWorld },
  template: ''
});

Conclusion

Both the old school approach and the cli approach are internally same. It is just about segregating the files and logic and to make things moduler in the second approach.
In bigger projects, you have to have all your logics segregated and vue’s official cli is a nice and simple tool to achieve the same.
Hope you now can write simple components are create your first vue project as well. We have more vue articles and tutorials in our project list, so stay tuned.
Happy coding :)

SHARE THIS ARTICLE

post-thumbnail
Today everyone knows the importance of a lightning-fast website and how the speed impacts the conversion rate of a business. Today, everyone wants the site to be a PWA so that the mobile users can have an app-like experience with the website because, for the majority of the merchants, the customers come through mobile devices.
Tue Apr 20 2021
post-thumbnail
Here we are going to see how you can manage backup and restore of Postgres database with docker.
Thu Sep 03 2020
post-thumbnail
Image sliders or carousels always have increased the UI attraction of websites and they are pretty useful for reflecting the major roles/products too. In case, I am having a website that sells tee-shirts,
Mon Apr 30 2018

About VoidCanvas

This blog was created out of hobby and talks mostly about technology, web development, JavaScript, NodeJS and related topics. Thank you for reading my blog.

Copyright 2022 - www.voidcanvas.com

Popular Articles

Authentication using Google's oAuth api with node.js

Thu Mar 10 2016

OAuth authentications are pretty popular now a days and another thing which is popular is JavaScript. This article shows how to plugin google’s oAuth api for authentication in your own node application.

CSS3 Loader Snippet Collection: (Part 2 - Squares)

Sat Mar 01 2014

This is a continuation of my CSS3 loader snippet collection series. I've provided spinning css3 animation loader in the part 1 of this series and here in part 2, I'm providing various square type loading