Collection of Vue examples for beginner front end developers
Branch: master
Clone or download
Latest commit 767c8ae Feb 15, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
aggrid Ag grid example Feb 1, 2019
async Async readme Feb 13, 2019
chart Update Feb 11, 2019
class Updated watcher and class Feb 10, 2019
component Clean up component example Feb 11, 2019
componentdynamic readmes for component examples Feb 12, 2019
componentmessage readmes for component examples Feb 12, 2019
computed Fix code sandbox link Feb 10, 2019
events Events readme Feb 10, 2019
hellonuxt Add nuxt example Feb 5, 2019
helloworld Minor cleanup Feb 10, 2019
instance Clean up instance Feb 10, 2019
localproxy Update Feb 15, 2019
vbind Clean up bvind Feb 10, 2019
vmodel Clean up vmodel Feb 11, 2019
vuebars Update Feb 11, 2019
vuechart Update Feb 11, 2019
watcher Updated watcher and class Feb 10, 2019 Fix typo Feb 14, 2019


Collection of Vue.js reference examples for teaching and learning Vue. These examples assume NO experience of front end by the reader. I myself had more experience as a backend engineer and found most front end examples required too much familiarity of HTML, Javascript and the front end stack. I journaled these examples to help myself and others if its helpful.

The early examples 1-15, are intentionally simple while the remainder start using VUE cli and NUXT which are more sophisticated patterns (they generate complex starting projects) that it is helpful to build up to.


These examples can be accessed by opening the index.html file within your browser. The related javascript and css files are referenced by this file when appropriate. This is a good way to test javascript and Vue snippets found on the web.

  1. Hello World
  2. Instance
  3. Vbind
  4. Computed
  5. Watcher
  6. Class
  7. Events
  8. Vmodel
  9. Component
  10. ComponentMessage
  11. ComponentDynamic
  12. Async

Charts and Graphs

These are interesting if you wish to jumpstart into data visualization.

  1. Chart
  2. Vuechart
  3. Vuebars


These examples start with the VUE cli and represent the beginnings of the single page app pattern. This pattern differs from the index.html file in that javascript files are separated out into .vue files which is easier to maintain in larger projects.

  1. LocalProxy
  2. AGGrid


The Nuxt project is an attempt to improve on the Vue cli by providing some common settings as defaults in the generated project.

  1. HelloNuxt


This any of this is helpful to you or you wish to improve upon these examples, pull requests are absolutely welcome!


  1. Mozilla DOM
  2. Vue Tutorial
  3. Babel Javascript 2015