VueJs - Getting Started
Tags: vue, beginners, tutorial, javascript
Published: 2020-08-13 06:28:56

_This article was first posted on my [blog][my blog], here is the [article][this article]_

---

> “_To get started with Vue, all you need is familiarity with HTML and JavaScript. With these basic skills, you can start building non-trivial applications within less than a day_”- **VueJs Docs**

### Hi _vue_ and welcome to **VueJs, The Series** 🚀

In this first episode we will be covering the following topics:

Table of Content |
--- |
[Getting Vue In Our Machine](#installation) |
[Setting Up Our Environment](#setUp) |
[Conclusion](#conclusion) |

## Getting Vue In Our Machine<a name="installation"></a>

We have a few different ways to install vue as you can see [here][vuejs installation]. But for the purpose of this tutorial I'll be using CDN.

```html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```

> Don't use this CDN for production.

## Setting Up Our Environment<a name="setUp"></a>

We will need an `index.html` and `app.js` files.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- VueJs Import -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>VueJs - Getting Started</title>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
    </div>

    <script src="app.js"></script>
</body>
</html>
```

Your `index.html` should look like this ☝

1. Imported VueJs CDN.
2. Created a div with an id of app.
3. Inside app created a title.

Let's go over 2 and 3 for a second:
* The div will be under control of the Vue instance.
* Title uses the special syntax that Vue will recognize and interpolate from our Vue instance.

Your `app.js` should look like this 👇

```javascript
new Vue({
  el: "#app",
  data: {
    title: "Hello World!"
  }
})
```
Hold your 🏇🏇, WHAT?

We created our Vue instance with `new Vue()` that takes an object as an argument.

Then we have the `el` and `data` properties. All properties (there are more and we will see them in this series) have reserved names that Vue will recognize.

In the `el` property we need to pass the html `el`ement that we want the Vue instance to take control.

In the `data` property we store all the data we want to use in our Vue instance. Think of the properties store inside the data object as variables, you can have strings, booleans, arrays...
In our case the data property is the string Hello world, very creative right?

Ok, so let's open our html file and see what we got there.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q74kcbsk59ta72r19qx9.png)

Congratulations, we created our first VueJs app! 🎉🥳

## Conclusion<a name="conclusion"></a>

In this episode we covered the following:

1. We installed the VueJs framework using CDN.
2. We created our html template and use the special `{{ }}` syntax.
3. We created our Vue instance and explain about the `el` and `data` properties.

> **TODO:** Build this Hello World app by your own but this time instead of using a CDN, install Vue in a different way.

[Here][vuejs installation] is again the link for the other installation options.

[GitHub repo][repository] for the code used in this episode.

---

Find me on Twitter [@eligarlo][twitter profile]







[vuejs installation]: https://vuejs.org/v2/guide/installation.html
[repository]: https://github.com/eligarlo/VueJs-The-Series/tree/master/Episode%201%20-%20Getting%20Started
[twitter profile]: https://twitter.com/eligarlo
[my blog]: https://blog.eligarlo.dev/
[this article]: https://blog.eligarlo.dev/vuejs-getting-started-ckdsf2yxe00wz97s12ef9a0ix