Build the smallest possible Vue app

Vue is versatile. It can be used in two basic ways:

• As a script added to an HTML document
• As a collection of vue files (for a full-blown single-page app)

In this chapter, since we’re starting from the very basics, we’ll discuss the former case: adding Vue as a script to an existing HTML document.

The smallest possible Vue.js app

Let’s start with the smallest possible Vue.js app.

For that, we’ll use the Codepen website, where we’ll build our new Vue app.

If you feel like it, spin up your browser on the Codepen website’s address, and follow along.

Alternatively, you can just read this chapter and by the end of it, visit the link with the completed app.

Here’s the HTML code on the above-referenced code pen:

<!-- We'll "mount" our Vue.js app here -->
<div id="app">
  
</div>

<!-- Reference to Vue.js version 2.6 (injected by Codepen, as a <script> tag) -->

<!-- Script Element for our first App -->
<script>
  // our actual Vue code goes here
</script>

On the above-referenced code pen, we’re loading the 2.6 version of Vue, from the CDN at this URL: https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js.

The Codepen online editor hides some sections of the completed HTML page, such as the doctype declaration, and the head tag. It also hides the script tag holding the Vue source code, added as the src attribute’s value from the above-referenced CDN.

This means that effectively, we can simplify our app’s code even further:

<div id="app"></div>

<script>
    // our Vue code goes here
</script>

Note:
This tutorial comes from my book on Vue.js titled:
A Better Way to Learn Vue.js: The Basics

String interpolation in Vue

This simple setup brings us to the first Vue concept to cover: string interpolation in mustache syntax.

<div id="app">
  {{  The Simplest Vue App  }}
</div>

If we add the above code to our codepen now, we’ll get the following output in the website preview:

  {{  The Simplest Vue App  }}

Hmm, this must be an error. We still have the mustache syntax in the output!

So something is not working right, and we need to fix it. Through fixing it, we’ll learn the basic idea that Vue is based on: data in HTML.

Data in HTML

Let’s revisit the starting code for this chapter:

<div id="app"></div>

<script>....</script> <!-- Codepen-injected Vue.js SOURCE code -->

<script>....</script> <!-- User-added Vue.js code -->

It’s important to hold the above three concepts in our head:

1. There’s a piece of HTML into which we’ll inject (“mount” our Vue app)
2. There’s a script tag which holds the entire Vue.js SOURCE code (all it’s bells and whistles that we can use)
3. There’s another script tag after the Vue library import, and it is this third script where “all the magic happens”, i.e. where we’ll add our code

In the previous section, we’ve updated the div so that it holds the mustache syntax interpolation. Here’s the full code again without the comments:

<div id="app">
  {{  The Simplest Vue App }}
</div>

<script></script>

So why does our mustache syntax APPEAR in the DOM?

The answer is simple, and two-fold:

• the mustache syntax only works with a Vue instance
• the mustache syntax expects to receive some data from the said Vue instance; once that data is there, mustache syntax will “convert” it to regular HTML

We’ll return to data in HTML soon enough. For now, let’s start solving the moustache syntax problem by making a Vue instance.

Adding a Vue instance

In “regular” html documents, we would add our Vue instance inside the above-mentioned script element:

<script>
new Vue({
    el: '#app',
    data: {
        theSimplestVueApp: 'A Better Way to Learn Vue'
    }
});
</script>

However, we’re using Codepen for this example.

Like we already mentioned, Codepen hides some functionality, and alters the “expected” behavior of HTML documents slightly.

Practically, this means that we shouldn’t add a script tag into the HTML panel in Codepen. Instead, we can skip the script tag altogether, and instead simply add our own Vue code right into the JS panel:

new Vue({
    el: '#app',
    data: {
        theSimplestVueApp: 'A Better Way to Learn Vue'
    }
});

In the above code, we’re instantiating a new instance object of Vue type. This is vanilla JavaScript functionality: we use the keyword new with a constructor function’s Capitalized name, to instantiate an object instance of that given constructor’s type. That’s why the Vue function constructor’s name is capitalized: it’s a common convention in JavaScript.

A Vue instance’s options object

The Vue constructor also receives an object:

new Vue({})

The above object literal (that was passed in as an argument to the Vue constructor) will hold all the options that our Vue instance is working with.

That’s why we call it the options object.

One of the options that the options object expects is the data property. The data property holds another object as its value. This object holds the specific data, organized as key-value pairs.

A Vue instance’s options object’s data option

Each key inside the data object can be interpolated inside the mustache syntax, i.e it can be wrapped inside the {{ }} brackets. These brackets are a signal for our Vue instance to interpolate the value that sits on the specific key inside the data option of the Vue instance’s options object.

In practice, this means that we’re interpolating the string “A Better Way to Learn Vue” in our resulting HTML because our Vue instance reached into the data option of our Vue instance’s options object, then found the key theSimplestVueApp, then read the string that “lives” under this key, and injected that string into the resulting HTML.

Here’s another way to look at it.

Once Vue instance is mounted, it scans the HTML for mustache syntax, and when it finds it, it looks into its options object’s data option, and tries to match the string that was found inside the moustache brackets. If it finds a match, it interpolates the appropriate string, in our case, “A Better Way To Learn Vue”.

The completed live app is live on the Codepen website.

Other options in the Vue instance’s options object

There are other options that we can add to our Vue instance’s options object:

• components
• props
• data
• methods
• computed
• watch
• lifecycle hooks

From the viewpoint of a newbie Vue developer, the above list might look a bit overwhelming.

Actually, it’s quite the opposite. It’s both liberating and a slight relief to know that there are just several options that a Vue instance’s options object expects and can work with.

There are no surprises! Everything neatly fits into the above-listed options.

With this, we finish chapter 1.

Summary

Here are the knowledge bites from this chapter:

1. Vue.js is just another JS library
2. We import the Vue.js library into our HTML pages so that it’s available to us
3. We write our own Vue code, starting with a mounting of a Vue app with a Vue instance object
4. The Vue instance object holds all the specifics of our specific Vue app
5. To get the data from a Vue instance into HTML, we use the {{ }} syntax
6. There are a number of options that a Vue instance expects to receive in its object literal argument (options object)

Note:
This tutorial comes from my book on Vue.js titled:
A Better Way to Learn Vue.js: The Basics