Add a Vue Button to a webpage

« Back to Recipes for typical tasks

---

Vue is the glue that binds web widgets to javascript code. There is no better way to get started than to read Getting Started on the Vue homepage. So go do that!

Here are some important details for working with Vue and Jekyll together, as we have it set up for Prospector.

Mustache collision!

LOL I've always wanted to say that.

IMPORTANT NOTE. Jekyll and Vue both implement their own versions of "HTML template processing" -- meaning, they read and modify the HTML pages you write to convert them into something else. Out of the box, they don't work together and your pages won't display properly. There are two specific conflicts, but they can easily be worked around:

1. Embedding a variable value using "Mustache syntax"

   • By default, Vue and Jekyll both use {{ mustache }} syntax, double-braces, to signify variables that need to be replaced with values. Jekyll is harder to change, so we'll switch Vue's mustache delimiter to be something else: '${ myVariable }.
   • In practice, this means that you have to do two things differently than you will read in the Vue docs:
     1. In code.js you will need to add delimiters: ['${', '}'] to the Vue object.
     2. In your HTML, anywhere you would normally put a {{mustache}}, put ${ ... } instead.
   • You can see examples of both of these changes in the tnc tool; search for delimiters in prospector/tnc/src/code.js for an example of how to add this to your Vue object, and search on ${ to see the alternate mustache form in tnc/index.thml.

2. V-Shorthands. Vue has two shorthand syntaxes for v-on and v-bind that Jekyll will mangle. Don't use the shorthand, just use the longer form:

   • v-bind:href="url" in Vue can normally be written as the shorter :href="url". Jekyll will break. Don't do that.
   • v-on:click="userClicked" can normally be written as @click="userClicked". Don't do that either.
   • As long as you use the longer forms, everything should still just work.

Adding an HTML element such as a button

OK Now that we got that out of the way, to add a plain button labeled with the contents of variable buttonName, and which calls clickedMyButton() when pressed:

<button v-on:click="clickedMyButton"> ${buttonName} </button>

Or you can get super fancy and use Vue to:

• Create a whole loop of buttons (say, for all seven days of the week!)
• Using Semantic UI classes to format the style of buttons to look very pretty
• And to add the CSS flag "active" to the button which is the same index as our selected day (in this case making that one button have a different appearance (solid)
• Titled with the value of the variable "whichDay"
• Which calls the function clickDay(index) when clicked, where index is 0-6

<button v-for="(whichDay, index) in allDays"
  class="mini ui inverted green button"
  v-on:click="clickDay(index)"
  v-bind:class="{ active: index==day }">
  ${whichDay}
</button>

These examples are for Button elements, but any HTML element can be used this way with Vue. You can also combine elements and code to build larger Vue "components" which can then be mixed and matched in your various viewers! I hope to explore further with Vue when we add more data portal elements.