Advanced features of Vue using Vuetify in 10 minutes

Spoiler alert: Project code base & Live Demo URL inside!

Vue.js Framework

Let’s get it straight. JavaScript Front-end frameworks are a gift to modern web developers.

  • They abstract away all the complexities of DOM manipulation & enable us to focus on the essentials.
  • They allow creation of reusable components. Components enable you to abstract away the complexities of a functionality (data & behaviour) — you can finally write modular code in HTML! Long live Shadow DOM!
  • They enable segregation of UI from the component behaviour. The HTML templates & the slot elements enable you to write markup templates that can be displayed dynamically at run-time using JavaScript.
Among these frameworks, Vue stands out with it’s simplicity, ease of implementation, essential libraries from the same ecosystem & outstanding documentation.

I have worked with Angular, React & Vue. From the strength of my experience, I believe you can go the fastest from Concept to Reality with Vue.

Motivation:

I have created a mini project to enable you to learn the following advanced features of Vue:

  • Routing with dynamic parameters
  • Creation of reusable components with properties
  • Interaction between two components through events, demonstrated through a Pizza delivery flow!

I have used Vuetify to build the UI fast & have kept the UI intentionally simple so that you get straight into the concepts.

A demo speaks a thousand words!

You can view the demo of these features live here. You can also access the GitHub repository of the code base here.

Please take a look & respond with your comments.

If you want me to showcase some additional features, please feel free to message me!