StepHub – Nuxt 4 PWA Shoes Store eCommerce Template

Good to Know

This template is designed primarily for mobile devices. For the best experience, open the live demo on your smartphone.

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 + 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.
• Fast & Responsive: Instant loading, great UX.
• Cross-Platform: One build for all devices.
• No App Store: Use it right from the browser.

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 & tag
• 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

Requirements

• Node.js — 18.x or higher
• Package manager — npm 9+ or pnpm 9+
• Knowledge — Basic Vue / Nuxt experience recommended

Browser & Device Compatibility

• Browsers: iOS Safari, Chrome, Firefox, Edge, Samsung Internet
• Installable PWA: iOS, Android, macOS, Windows

Technologies Used

• Nuxt 4 — full-stack Vue framework with file-based routing
• Vue 3 — Composition API with <script setup> syntax
• TypeScript — strongly typed throughout all .ts and .vue files
• Pinia + persistedstate — global state management with local storage persistence
• @vite-pwa/nuxt — PWA integration for offline support and home screen installation
• Workbox — service worker with smart caching strategies
• @nuxt/image — automatic image optimization and lazy loading
• @nuxt/fonts — optimized Google Fonts loading with zero layout shift
• motion-v — smooth, declarative animations for Vue 3
• Swiper — touch-friendly sliders and carousels
• SCSS — modular styles with variables for easy theme customization
• Mulish — clean geometric sans-serif font for modern UI

What You’ll Get After Purchase:

• Complete Source Code – Clean, well-organized Nuxt 4 PWA project
• Step-by-step Documentation – For easy setup and usage
• 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

1. Download and unzip the project
2. Run npm install to install dependencies
3. Run npm run dev and open http://localhost:3000 in your browser
4. 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?