Skip to content
Riley Sklar
Back to case studies

Vue Learning Project

Vue Packing List App

A Vue.js packing-list app built to learn the Vue ecosystem end-to-end — Vuex for state, Vue Router for navigation, reactive bindings driving the UI, deployed live for study-abroad students.

Vue.js + Vuex Vue Router
Vue.js study-abroad packing list app interface

Visit the live web app

What I learned

This was my first real dive into Vue — and the lesson was how opinionated the Vue ecosystem is in a productive way. Vuex for state and Vue Router for navigation give you a clear answer for problems React leaves you to solve yourself. Reactivity in Vue feels different from React’s render model in ways that are worth experiencing first-hand even if you stay in React day-to-day.

Building for a specific user — study-abroad students who I’d worked with for a decade — also made the feature decisions much easier. Real users beat hypothetical users every time.

What I did

  • Built a personalized packing-list app where students categorize items and mark them packed.
  • Used Vue’s component model + reactive data binding to keep the UI live as the list changed.
  • Added Vuex for state management and Vue Router for navigation between list views.
  • Iterated on community feedback post-launch, adding shared lists and cloud sync.

What I shipped

A live Vue app at https://study-abroad-packing-list.netlify.app that has been used by real study-abroad students — and a personal stepping stone from “React developer” to “developer who can pick the right tool.”

Get in touch

Building something AI-first?

I'm open to chat about the intersection of AI and web growth — GEO/AIO strategy, MCP and agentic architecture, marketing-engineering ops. Otherwise, just say hi.