VUE.JS via JSON Menu Demo


  1. Because I'm hosting this on my site, which enforces explicit TLS/HTTPS, and because the original JSON source is not reachable via HTTPS, I had to host the JSON file on my server so it can be served via HTTPS. The JSON was not modified.
  2. If loading the HTML locally, the useAlternateDataSource boolean may be set to false to load from the supplied datasource.
  3. I switched the source of the Jquery and Vue.js libraries to the Cloudflare CDN to accelerate loadtimes and to reduce the DNS calls to separate external sources. This helps decrease loadtimes while adding the benefits of the Cloudflare CDN.
  4. If I had more time I would style the menu to look more like the sample provided, add a loading indicator to be displayed while the Vue object was being created, add some error handling, and implement it into a Bootstrap dockable side menu, among other things.
  5. Also, absolute paths were used (which is contrary to best practices), but I felt would be appropriate here for potential transportability.
  6. As a humorous side-note, too much time was spent figuring out that VisualStudio doesn't seem to like Vue.js syntax and was trying to be "helpful" by stripping out colons from the Vue template and syntax. Once I figured this out I used the MS Visual Studio Code application to edit the HTML file without further "help" from my IDE. #facepalm