Overview
StepHub is a production-ready Nuxt 4 PWA eCommerce template built for shoes and footwear stores. It comes with 39 screens, a complete cart and checkout flow, authentication, wishlist, order tracking, product reviews, and more — all in a clean, mobile-first design installable on iOS, Android, Mac, and Windows. Stop building from scratch. Launch your storefront in hours.
At a Glance
| Screens | 39 screens | Framework | Nuxt 4 / Vue 3 |
| Language | TypeScript | PWA | Yes — installable |
| State Management | Pinia | Styling | SCSS |
| Design File | Figma included | Data | JSON mock (API-ready) |
| Support | 6 months | Updates | Free lifetime updates |
Why Choose PWA?
| ✓ App-like Feel — fast and smooth, no app store needed | ✓ Works Offline — available anytime, even without internet |
| ✓ Cross-Platform — one build for iOS, Android, Mac, Windows | ✓ Instant Access — install directly from the browser |
| ✓ Fast & Responsive — instant loading, great UX | ✓ No App Store — skip review delays and fees |
Key Technical Features
| ✓ Nuxt 4 with Vue 3 and Vite | ✓ TypeScript throughout (.ts / .vue) |
| ✓ Composition API with <script setup> | ✓ Pinia + pinia-plugin-persistedstate |
| ✓ @vite-pwa/nuxt — offline support & installable | ✓ Workbox — service worker & caching strategy |
| ✓ @nuxt/image — automatic image optimization | ✓ @nuxt/fonts — optimized Google Fonts |
| ✓ SCSS variables — easy theme customization | ✓ motion-v — smooth animations |
| ✓ Swiper — touch-friendly sliders | ✓ Static JSON mock data — API-ready |
| ✓ Modular architecture following Nuxt 4 conventions | ✓ Figma source file fully editable |
Key UI & eCommerce Features
| ✓ Product listing & detail pages | ✓ Full product description page |
| ✓ Category browsing | ✓ Filter by size, color & price |
| ✓ Search with live query input | ✓ Wishlist with empty state |
| ✓ Cart & checkout flow | ✓ Address selection & payment method |
| ✓ Promo code support with validation | ✓ Order history with status screens |
| ✓ Product reviews — list & submit form | ✓ My Promocodes management |
| ✓ User profile with edit screen | ✓ Phone & email verification |
| ✓ Sign In, Sign Up, OTP, Forgot Password | ✓ Onboarding for first-time users |
| ✓ Order Successful & Failed screens | ✓ Delete Account flow |
Screens Included — 39 Total
|
Shopping (7)
Cart & Checkout (6)
Wishlist (2)
Orders (3)
Reviews (2)
Promocodes (2)
|
Authentication (
Profile (9)
|
Requirements
| Node.js | 18.x or higher |
| Package manager | npm 9+ or pnpm 9+ |
| Knowledge | Basic Vue / Nuxt experience recommended |
Browser & Device Compatibility
| Browser | iOS Safari | Chrome | Firefox | Edge | Samsung Internet |
|---|---|---|---|---|---|
| Support | ✓ | ✓ | ✓ | ✓ | ✓ |
| Platform | iOS | Android | macOS | Windows | — |
| Installable PWA | ✓ | ✓ | ✓ | ✓ | — |
Technologies Used
| Nuxt 4 | Vue 3 — Composition API |
| TypeScript | Pinia + persistedstate |
| @vite-pwa/nuxt | Workbox |
| @nuxt/image | @nuxt/fonts |
| motion-v | Swiper |
| SCSS | Mulish (font) |
What You’ll Get After Purchase
| ✓ Complete Source Code | Clean, well-organized Nuxt 4 PWA project |
| ✓ Step-by-step Documentation | Easy setup, customization guides, and tips |
| ✓ Figma Design File | Fully editable source design for all 39 screens |
| ✓ 6 Months of Support | Help with setup, bugs, and general questions |
| ✓ Free Lifetime Updates | All future improvements included at no extra cost |
Easy Setup
- Download and unzip the project
- Run
npm installto install dependencies - Run
npm run devand openhttp://localhost:3000in your browser - Replace static JSON mock data with your own backend API — done!
Perfect For
- Footwear & Apparel Brands — launch a stylish mobile storefront fast
- Fashion Retailers — showcase collections with a clean, modern UI
- Startup eCommerce Projects — get to market quickly with a ready-made foundation
- Freelancers & Agencies — deliver polished client projects without building from scratch
- Developers — learn Nuxt 4, Vue 3, and PWA best practices with a real-world example
FAQ
Q: Can I connect this to a real backend?
A: Yes. All data comes from static JSON files — easy to replace with any REST or GraphQL API.
Q: Is the Figma file fully editable?
A: Yes, the fully editable Figma source file covering all 39 screens is included with your purchase.
Q: Does this work on iOS and Android?
A: Yes. As a PWA, it installs directly from the browser on iOS, Android, Mac, and Windows — no app store required.
Q: Do I need Nuxt experience to use this?
A: Basic Vue/Nuxt knowledge is enough. The code is clean and structured, and step-by-step documentation is included.
Q: Can I use this for a client project?
A: Yes. A Regular License covers one end product. For multiple clients or SaaS use, an Extended License is required.
Changelog
v1.0.0 — Initial Release (May 2026)
- 39 screens — complete eCommerce flow
- PWA support with offline mode and service worker
- Authentication, cart, wishlist, orders, reviews, promo codes
- Figma source file for all 39 screens included
About Us
We provide a full range of services — mobile and web app development, and UI/UX design. Whether you have a ready-made design or need one from scratch, reach out via the links below. We’re here to bring your ideas to life.
Discover What We’ve Built
Need Help?
