Rebuilding A Cluttered Vue Storefront With Alpine.js
The Legacy Problem
We inherited a Vue.js storefront that had grown chaotic over time: too many dependencies, unclear component ownership, inconsistent state management, and bloated bundles.
Our client’s storefront had grown organically over time — and it showed.
What started as a simple Vue.js app had turned into a monolith:
- Heavy global state with unclear boundaries
- Bloated third-party dependencies
- Unused plugins, legacy components, inconsistent design tokens
- Hard-to-debug hydration issues
Onboarding new developers was painful. Even small changes felt risky.
Rather than migrate to another heavyweight framework, we did something unconventional: we rebuilt the frontend with Alpine.js.
The Turning Point
Rather than doubling down on another full-featured framework, we took a step back and asked:
“What if we didn’t need all this complexity?”
Enter Alpine.js — a lightweight, declarative JavaScript framework that pairs perfectly with server-rendered HTML.
Why Alpine.js
- Lightweight: <10kb gzipped
- No hydration delay: works directly on server-rendered HTML
- Simple interactivity: dropdowns, toggles, forms — with no complex lifecycle or bundling
- Zero build config: works out of the box with Liquid or any templating engine
Our Approach
- Replaced Vue components with native HTML + Alpine attributes
- Used Shopify Liquid templates as the main rendering engine
- Handled form submissions, modals, and interactive UI with simple
x-dataandx-ondirectives - Stripped out unnecessary state logic — Alpine gave us enough without overkill
Results
- Faster FCP and TTI
- Lower time-to-deploy due to simpler builds
- Happier content team — templates became more editable
- Clean codebase with no framework lock-in
The Takeaway
This wasn’t just a rewrite — it was a shift in mindset. We simplified the tech to help scale, and Alpine gave us a low-maintenance way to do it.
