Sample Vue.js app to demonstrate the simple concepts (app, conditionals, loops, binding, components, and routes)

Update: 11 November 2019

I’ll be honest – The cost is great example. I created this for some student teams at RMIT to give them something to get started. But it works and it is simple, so I hope you still get the underlying value from it.


 

I’ve created a very simple Vue.js sample app you can run immediately to see different Vue concepts in action.

Get the code at: https://github.com/jsnelders/vuejs-sample

Simply download the 2 files and run vueapp.html in a browser (it should even run from your hard drive). No compiling or tools required.

See in action at https://jsnelders.com/vuejs_sample/.

 

The app is a simple way to see the most common elements of Vue in action:

  • Setting up a simple in-page “app”.
  • Setting the “data” model.
  • Creating methods (for example for handling click events.
  • Using if statements.
  • Using for loops.
  • Creating “hash” routes which map to different “views” in the app that you can switch between (think of them as pages within a page).
  • Creating components
    • With templates defined in the JavaScript.
    • With templates in the HTML page.
    • Attaching them to routes.
    • Stand-alone components you can use in your app, and allow you to pass data in from the app, and get data back from the component via events.

These simple concepts should cover 95% of your Vue.js needs.