learn-py4web.github.io

Unit 16: Building applications with Vue.js

In this unit, we will learn how to develop Vue applications that receive and send information from/to the server.

Our main example consists in a Vue app that manages a list of contacts. The app (the page) will load the contacts from the server, visualize them, let the user add contacts, and delete them. We will then see how to use Vue to enable editing the contacts in place.

We also discuss how to implement navigation in Vue, that is, how to send the user to other pages when the user interacts with Vue-generated content.

Resources

• Vue documentation. In particular, look at:
  • The Essentials section of the Vue guide.
  • Reactivity in depth: read this section to understand how Vue keeps the page in synch with the JavaScript, and to avoid common pitfalls in this.

• Bulma documentation.

• Watch the video on how to debug Vue.js apps.

• Browser JavaScript documentation:
  • createElement documentation.
  • window.location documentation.

Code

• From a static page to a Vue app; look at the commits done on April 26, 2022: these build the app in stages, from static to dynamic.
• A contacts app in Vue.js.
• Editing contacts in place.
• Vue reactivity; the last commit corresponds to the end of the class; look at previous commits to see the initial state.
• Code for the navigation in Vue app. You need to look at the various branches of this repository to find the various versions of the navigation code discussed in the video.

Videos

• A contacts app in Vue.js (YouTube).
• Editing contacts in place (YouTube).
• Reactivity (YouTube), or better, how to debug reactivity issues in Vue.
• URLs and Navigation in Vue (YouTube).