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.
That app didn’t do anything but display some hard-coded text in a
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
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
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.