• Home
  • Blog
  • Grocery List Using Vue.js 3

    In my free time, I've been teaching myself the basics of front-end web development. Currently, I am making my way through this Udemy course by Maximilian Schwarzm├╝ller. It's been a terrific learning experience thus far. I highly recommend it to anyone interested in learning to build reactive web applications using the Vue.js 3 framework.

    The grocery list application below is pretty basic. Still, in building it, I got the opportunity to implement a ton of rudimentary Vue.js 3 concepts such as interpolation, data and event binding, methods, computed properties, watchers, dynamic styling, conditional content rendering, working with list items, etc.

    Type in a grocery item in the text input field and click the Add Item button. Click on or around the grocery item name to remove it. You will not be able to click and remove an item from within the item text input field thanks to using the stop modifier with the click listener.

    Grocery List

    Items to buy

    No items have been added yet! Hooray!