Course Content
VUE Tutorial
About Lesson

Hello World Example

Vue.js has gained immense popularity in the web development world due to its simplicity and flexibility. In this article, we’ll delve into the basics of Vue.js through a classic “Hello World” example, demonstrating how straightforward it is to get started with this progressive JavaScript framework.

What is Vue.js?

Vue.js is a progressive JavaScript framework for building user interfaces. Created by Evan You and initially released in 2014, Vue.js has since become a go-to choice for developers seeking a lightweight yet powerful solution for front-end development.

Setting Up Vue.js

Before we dive into the “Hello World” example, let’s ensure you have Vue.js set up in your project. You can include it via a CDN or install it using npm. Refer to the official Vue.js documentation for detailed installation instructions.

Hello World Example

Now, let’s create a simple Vue.js application that displays “Hello World.”

Step 1: Create an HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Hello World</title>
</head>
<body>

<div id="app">
{{ message }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="app.js"></script>

</body>
</html>

Step 2: Create a JavaScript file (app.js)
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
});

In this example, we’ve created a simple Vue instance that binds to the div with the ID of ‘app’ in our HTML file. The data property contains a message, which is then displayed within the double curly braces ({{ }}) in the HTML.

Running the Application

Save both files and open the HTML file in a web browser. You should see “Hello World!” displayed on the page. Congratulations! You’ve just created your first Vue.js application.