A small Vue.js app

Laying out my simple Vue app

In The tiniest Vue.js app, I showed a simple proof of concept for inserting a Vue.js app into my Hugo post.

The reason for the experiment was so that I could explore some JavaScript, and in particular some Vue.js, within a blog context, making notes on it as I go along.

That app didn’t do anything but display some hard-coded text in a <div>, but it proved two things: 1) that getting started in Vue has a very low barrier to entry, and 2) that it is possible, even simple, to embed some Vue on a post-by-post basis on a static website generated using Hugo, just by linking to the Vue.js library and the JavaScript and CSS files defining the Vue app from the post’s Markdown file.

Before adding any more Vue functionality, I’ll add some HTML and CSS to mock up the features I want to add.

I continue as I started, putting all my Vue template syntax (which at the moment is ordinary HTML) into the instance’s template option.

I want this to be a kind of proto-note-taking-app. By adding to the template the elements I want my app to display, I get a mock-up like this:

Vue.js still doesn’t do anything other than insert the HTML from the app template into this post.

Eventually, one ought to be able to create, and view, a list of JSON objects (tiddlers), each with a text property and a tags array.

The app’s template entry at this point:

template: `
  <div id="app-wrapper">
    <!-- The big area at the left of the sidebar -->
    <div id="tiddler-area" class="bigarea">
      <div class="label">Tiddler text:</div>
      <!-- An editable div to display and edit the text property of the active tiddler -->
      <div id="text-tiddler" contenteditable="true"></div>
      <!-- This div will hold all elements related to display and editing of the tiddler's tag list -->
      <div id="tags-tiddler">
        <!-- A div to display existing tags in -->
        <div id="tag-buttons-wrapper">
        </div>
        <!--  A div to wrap the tag-adding stuff in -->
        <div id="newtag-tiddler-wrapper">
          <span id="label-newtag" class="label">Add a tag: </span>
          <div id="newtag-tiddler" contenteditable="true"></div>
        </div>
      </div>
      <!-- This div demarcates the last row of the bigarea div -->
      <div id="lastrow-tiddler">
        <!-- A button to empty the active tiddler -->
        <button id="clear-tiddler">Clear</button>
        <!-- A button to add the active tiddler to the tiddlers list, or if it exists,
        update any of its properties that have been edited. -->
        <button id="submit-tiddler">Submit</button>
      </div>
    </div>

    <!-- the sidebar for listing tiddlers -->
    <div id="rightside" class="bigarea">
      <h2 id="app-title">The app's title</h2>
      <div id="tiddler-list">
        <h3 id="label-tiddlers">Tiddler list</h3>
      </div>
    </div>
  </div>
  `

There are buttons, but they don’t do anything. There are divs with their contenteditable attributes set to "true", but anything you enter in them goes nowhere. There’s no data.

In the next step, I will begin to fill in the missing functionality with Vue.