Skip to content

Collection of Vue examples for beginner front end developers

Notifications You must be signed in to change notification settings

peterlamar/vue-examples

Repository files navigation

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.

  1. Chart
  2. Vuechart
  3. 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.

  1. LocalProxy
  2. AGGrid
  3. tailwind
  4. svgdots
  5. d3connectdots
  6. 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.

  1. HelloNuxt
  2. 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

About

Collection of Vue examples for beginner front end developers

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published