A small Vue.js app

The tiniest Vue.js app

I recently decided to learn the basics of the Vue.js JavaScript library/framework, and, as a non-developer, I was determined that I wouldn’t open too many cans of worms at once. Cans such as components, routing, CSS preprocessing, Webpack, or Vuex.

Here is a salient selling point from the Vue docs:

“Vue is designed from the ground up to be incrementally adoptable.”

(From the Vue.js guide introduction)

This means there’s low overhead for starting very simple projects, which suits my current purpose.

Goal

My goal for this post is to build a minimal Vue.js app, using (nearly) the fewest concepts possible, and embed it into a web page (namely this page, generated by the Hugo static site generator).

The really minimal way for me to say I’ve done something in Vue is to load the Vue.js library, then create a Vue instance with no options whatsoever, as illustrated in the Vuejs.org guide. It doesn’t interact with our DOM, and it doesn’t have any data or methods.

I can think of two “minimal” Vue apps that do show up in the DOM; each requires two instance options to be set.

1. An app that inserts an element into the DOM (options: el and template).
2. An app that puts some text into an element already defined in HTML (options: el and data).

Although the Vuejs.org guide starts with the second method, I’m going to take the first approach.

The reason is that method 2 requires putting some Vue template syntax into the main page HTML. Since I am embedding the Vue stuff into blog posts, I want it to be separate and portable. The simplest way to do that for the moment is to put it into the Vue instance template option.

On to the nuts and bolts:

The plan is to make an app that does nothing but insert an HTML <div>, containing boilerplate text, into this blog post.

This requires some HTML and some JavaScript. In the really minimal case, CSS is optional, but I am using it to make my app easier to understand. The HTML lives in the Markdown file I’m writing this post in, which Hugo then uses to generate an HTML file. The JavaScript for the app, the Vue.js library, and the CSS all live in their own files, and it’s all tied together with links inside the HTML file.

Breakdown

1. Write a JavaScript file to create a Vue instance
2. Put an element into the main HTML for the app to mount to
3. Link to all the needed .js and .css files from the HTML page

1. Write a JavaScript file to create a Vue instance

In my app’s JavaScript file, I will define a Vue.js instance with two options: el and template.

The el option supplies the id or class of the element in the DOM that I want the Vue instance to manage. In the example below, mainapp is the element’s id.

The template option is the property into which I put all the HTML and Vue template syntax associated with the app. I use JavaScript’s template literal format to allow me to easily write multi-line templates. This is fairly new and not supported by all browsers.

// -- simplest_vue_app.js -- //

// The main (so far only) Vue instance:
var mySimpleApp = new Vue({
  el: '#mainapp',
  template: `
  <div id="app-wrapper">
        <h2 id="app-title">I don't think a Vue app can be much simpler than this!</h2>
  </div>
  `
})

2. Put an element in the main HTML for the Vue app to mount to

I only need to put one thing in the HTML file in order to embed the app: an element for the app to mount to. I chose <section id="mainapp">, but there’s little point in getting semantic about it, since the contents of the template replace that element. A <div> would do just as well.

<section id="mainapp"></section>

3. Link to needed files

It’s possible to include HTML, JS, and CSS all in a single .html file, but I decided to begin with .js and .css files separate from the HTML, even though one might argue that that isn’t the simplest possible configuration:

• It’s tidier to start out with these concerns separated. As an app grows, it quickly gets harder to navigate around the file.
• It’s simple to link to them all from the page’s .html file (or a Hugo Markdown file).

To include the Vue.js framework and the app in this post, I insert the following into the post’s Markdown file:

<link rel="stylesheet" href="/css/simplest_vue.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript" src="simplest_vue_app.js"></script>

Note that during development, I used the development version of Vue, as recommended in the Vue.js installation guide, but after everything is working I am switching to the production version, vue.min.js.

Demo

Here is a very minimal Vue app, embedded into this post:

Now that I know I can put Vue here, I will start making something just a bit less simple.