Simplest Way to Create a Vue Instance

A step by step guide to the simplest Vue.js app with no fluff.

Current cdn used:

<script src=””></script>

Other places to get the cdn,

Create app.js containing a data element with the label of “title”

vue hello world

“new Vue” creates the Vue instance

“el” creates the Vue element, which is labeled “app”, this is referred to in the HTML page to create the view instance with the element of “app”.

“data:” creates a property which will store the data the Vue instance will use.

“title:” this is the property which contains the string, ‘Hello World’. This property gets called in the HTML using the double curly braces, {{}}.

The HTML page of “Hello World”

Vue html page hello world

The Vue library is called with the cdn

<script src=””></script>

The Vue code we created is added by:

The specific Vue element is called and a Vue instance created by

<div id”app”>

Everything between the <div id”app></div> is within the Vue instance.

Anything that is outside the specific Vue instance will be treated as HTML, Note: multiple Vue instances can be run on one webpage, although not quite sure what the benefit is.

What we see in the browser.


We see the variable which has the property of “title”, in the browser it becomes a HTML element.

Code for this app:


new Vue({
el: ‘#app’,
data: {
title: ‘Hello World’


<!DOCTYPE html>

<script src=””></script>
<h1>Simple Vue App</h1>
<div id=”app”>
<h2>{{ title }}</h2>
<script src=”app.js”></script>


The essential steps when learning to code

The pivot continues:

As I continue to increase the velocity away from the world of SEO, content marketing, linkbaiting and fake news consultant to large media organisations, I get ever closer to Planet Code. I discover there are a few steps in the “learning to code”, journey..

Relating to learning a framework or programming language it goes like this.

1. I have no idea what the hell is going on, this stuff is complete voodoo and those who make it work are genius.

2. Learning this stuff is so hard my brain is being trampled on by a stampede of overweight orangutangs.

3. Watching Netflix and playing is far easier than learning javascript.

4. What the hell, I just coded something and it did the something I wanted the something to do. I have entered the garden of heavenly cool people.

5. This framework/language is amazing, I just found out it could do stuff in ways I never even knew stuff could be done.

6. This framework is absolute garbage, I just found out the creator is no longer updating it and has emigrated to an ashram in Thailand, leaving holes in the framework.

7. You then find out a Google Firebase, dbase cannot be searched, erm…. (it can but you have to go to Burning Man to do a 36 hour shamanic dance and suffer involuntary celibacy)

8. You lick your lips at the React vs Vue debate and resist the temptation to tap the primal brains of innocent coders for links.

9.You master, Webpack, Babel, SASS, Vue CLI, Bootstrap, Materilize, Firestore cloud functions, ES16, mongoDB…etc and then you forget why you were learning all this stuff in the first place.

10. You buy a small farm in Cornwall, and grow goats.