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.

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. Mustache collision! LOL I've always wanted to say that.

   • 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.