vue-examples

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.

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. VUE cli is what an experienced front end developer may use if they are unfamiliar with Vue and Nuxt would be used by an intermediate Vue Front End engineer as it provides more benefits as well as more complexity.

Introduction

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.

13. Chart
14. Vuechart
15. Vuebars

Vue CLI

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.

16. LocalProxy
17. AGGrid
18. tailwind
19. svgdots
20. d3connectdots
21. firebasechat

Nuxt

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

22. HelloNuxt
23. todo-app

Contributing

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

References

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