Introduction

Over the last two decades the front end development as changed considerably. Websites now are more interactive with a lot of dynamic behaviour. This also means a lot of work for the developers to keep up with the trend. Fortunately, there are many javascript frameworks that can help you build interactive applications.

One such framework is Vue.js, a powerful framework to create the modern-day user interface. It is fast, reliable, developer-friendly and easy to start with. The purpose of this article is to help you get started with Vue.js quickly using cdn without having to install any packages or dependencies to test Vue.js application.

For this tutorial, I am assuming you have a basic knowledge of HTML, CSS and Javascript.

First application: Hello world in Vue.js

The simplest example is the very obvious hello world application. To run this application we will be using the CDN. First, let us create an index.html file with basic HTML structure. For simplicity, we will be writing the js code in the same file.

index.html:

<!DOCTYPE html>
<html>
<head>
	<title>First Vue.js app</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<h1>{{ message }}</h1>
	</div>

	<script>
		var app = new Vue({
			el: "#app",
			data: {
				message: "Hello World!"
			}
		})
	</script>
</body>
</html>

Open the file in a web browser and you should see a ‘Hello World!’ text. Congrats! You have run your first vue.js app.

Notice we have used a special tag {{}} and new Vue() function with options. These are part of the vue.js framework which we will be discussing in details.

Vue.js double curly braces - {{ }}

Vue.js uses double curly braces(Mustache syntax) to declare data-binding between the DOM element and Vue instance object. What it means is that the mustache syntax will be replaced with the value of message property.

In our example, the message property is declared in the data object as “Hello World!” Hence, we see “Hello World!” displayed in the browser instead of {{ message }} string.

Vue Instance - new Vue()

var app = new Vue({
			el: "#app",
			data: {
				message: "Hello World!"
			}
		})

The new Vue() method is the root of the Vue.js application. This constructor marks the beginning of the application by compiling HTML template, initializing the instance data {message: "Hello World!"} and creating the data-binding.

Using the Vue constructor we can specify the data needed to initialize the application. In our example, we are specifying the el option as “#app” and data object containing the value for message.

‘el’ option in Vue

The el option is used to specify the DOM element where we would like to mount the Vue application. In the above HTML code we have used the div element with id=”app” to specify the mounting point for Vue. In this case, el will hold the value of “#app” and all code within this div will respect the new Vue instance.

If you do not specify the div id as “app”, the application will throw a warning

[Vue warn]: Cannot find element: #app

If you open the web browser console and set the value of app.message = “Text from the console” the content will be updated on the HTML page.

Troubleshooting [Vue warn]: Cannot find element: #app

A common error while running the Vue app is the ‘cannot find element #app’ error. Remember for the Vue to function right the DOM elements need to be loaded first. Ensure that the script containing the Vue code is initialized at the bottom. If you are using a separate javascript file then you either:

  1. Use the defer or async option to tell the browser to execute the javascript code after DOM elements are loaded.
<script defer src="./code-containing-vue.js"></script>
  1. Use window.onload in js file.
window.onload = function () {
	var app = new Vue({
			el: "#app",
			data: {
				message: "Hello World!"
			}
		})
}

Conclusion

In this tutorial, we have seen a simple example to get you started using vue.js. In the next few articles, we will explore more options provided by vue.js which will help us create complex real-world applications.