Skip to content
Collection of Vue examples for beginner front end developers
JavaScript Vue HTML Go CSS
Branch: master
Clone or download
peterlamar Merge pull request #13 from peterlamar/dependabot/npm_and_yarn/22-hel…
…lonuxt/nuxt/devalue-1.2.4

Bump @nuxt/devalue from 1.2.0 to 1.2.4 in /22-hellonuxt
Latest commit 54b49c6 Nov 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
1-helloworld Reset back to upstream Apr 9, 2019
10-componentmessage Rename folders with numbers Apr 9, 2019
11-componentdynamic Rename folders with numbers Apr 9, 2019
12-async Rename folders with numbers Apr 9, 2019
13-chart
14-vuechart Rename folders with numbers Apr 9, 2019
15-vuebars Rename folders with numbers Apr 9, 2019
16-localproxy Rename folders with numbers Apr 9, 2019
17-aggrid Rename folders with numbers Apr 9, 2019
18-tailwind Rename folders with numbers Apr 9, 2019
19-svgdots Added comments to explain elements Sep 19, 2019
2-instance Rename folders with numbers Apr 9, 2019
20-d3connectdots Revert accidental change Sep 19, 2019
21-firebase-chat
22-hellonuxt
23-todo-app New example Nov 16, 2019
3-vbind Rename folders with numbers Apr 9, 2019
4-computed Rename folders with numbers Apr 9, 2019
5-watcher
6-class Rename folders with numbers Apr 9, 2019
7-events Rename folders with numbers Apr 9, 2019
8-vmodel Rename folders with numbers Apr 9, 2019
9-component
README.md Merge branch 'master' of github.com:peterlamar/vue-examples Nov 16, 2019

README.md

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
You can’t perform that action at this time.