Build the smallest possible Vue app
An excerpt from Chapter 1 of 'A Better Way to Learn Vue', available on Leanpub
By: Ajdin Imsirovic 10 February 2021
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:
- Thereās a piece of HTML into which weāll inject (āmountā our Vue app)
- Thereās a
script
tag which holds the entire Vue.js SOURCE code (all itās bells and whistles that we can use) - Thereās another
script
tag after the Vue library import, and it is this thirdscript
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:
- Vue.js is just another JS library
- We import the Vue.js library into our HTML pages so that itās available to us
- We write our own Vue code, starting with a mounting of a Vue app with a Vue instance object
- The Vue instance object holds all the specifics of our specific Vue app
- To get the data from a Vue instance into HTML, we use the
{{ }}
syntax - 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