Updated 2 weeks ago
NYC team · same business day
View live demo →
Specs

What's in the box.

Frameworks
7
all included
License
Personal
1 commercial site
Updates
Lifetime
free, quarterly

FattSushi Vue blends the sophistication of Japanese dining with the intuitive elegance of Vue 3 and the Composition API. Vue’s reactivity engine ensures your sushi menu responds to every filter tap and search keystroke without delay, the gallery transitions between categories with fluid grace, and the reservation form validates as guests type. For developers who value a framework that stays out of the way while delivering powerful results, FattSushi Vue is the perfect match — like rice and vinegar.

All 18 pages live as single-file Vue components organized by feature, with Pinia stores managing menu inventory, gallery state, and reservation data. Vue Router 4 delivers smooth client-side navigation with lazy-loaded routes, and the Vite development server provides instant feedback during customization. Whether you are building for an intimate eight-seat omakase counter or a bustling sushi chain, FattSushi Vue adapts to your ambition.

Key Features

  • Vue 3 + Composition API — Setup scripts, reactive refs, computed properties, and composable functions for expressive, modern development.
  • 18 Total Pages — A polished sushi restaurant website implemented entirely as single-file Vue components.
  • 6 Homepage Designs — Dramatic sushi hero imagery, video backgrounds, featured omakase sections, and booking CTAs as route components.
  • Pinia State Management — Type-safe stores for sushi menu categories, gallery photos, reservation bookings, and blog articles.
  • Vue Router 4 — Client-side routing with named views, lazy-loaded modules, and configurable scroll behavior.
  • Menu Component — Reactive category tabs (nigiri, sashimi, maki, specialty) with search, animated item cards, and piece/price display.
  • Gallery with Teleport Lightbox — Filterable grid with Vue’s teleport API providing a full-screen, keyboard-accessible image viewer.
  • Reservation Form — VeeValidate-driven booking form with date/time pickers, party size, seating choice, and occasion selector.
  • Chef & Team Views — Profile card components with named slots for training background, signature dishes, and social icons.
  • Blog System — ArticleGrid, Sidebar, and ArticleDetail components with dynamic routing and category-based filtering.
  • Composable Functions — useSushiMenu, useGallery, useReservation composables for reusable, testable business logic.
  • Vue Transitions — Built-in transition groups for page navigation, list filtering, and modal enter/leave with Japanese-inspired easing.
  • Scoped + Global SCSS — Component-scoped styles with shared dark-and-gold SCSS variables for a cohesive luxury brand feel.
  • Fully Responsive — Bootstrap 5 grid with Vue composables for breakpoint-aware layout behavior.

Who Is This Template For?

  • Vue.js Developers — Engineers who love Vue’s progressive philosophy and want a Japanese restaurant template ready for production.
  • Sushi Bar Entrepreneurs — Restaurant owners partnering with Vue developers to launch a premium online presence affordably.
  • Japanese Food Delivery Platforms — Startups integrating sushi menu browsing and ordering into Vue-based applications.
  • Hospitality Groups — Companies managing multiple Japanese dining brands from a shared Vue component library.
  • Nuxt 3 Projects — Directly portable to Nuxt 3 for server-rendered SEO, static generation, and hybrid deployment.

Pages Included

  • Homepage (6 variations) — index, homepage-2, homepage-3, homepage-4, homepage-5, homepage-6
  • About — about
  • Menu — menu
  • Gallery — gallery
  • Our Chef — our-chef
  • Team — team
  • History — history
  • Reservation — reservation
  • Blog — blog, blog-left-sidebar, blog-details
  • Utility Pages — contact, typography

Template At a Glance

  • Category: Sushi Restaurant / Japanese Dining / Asian Cuisine
  • Total Pages: 18
  • Framework: Vue 3 + Composition API
  • Build Tool: Vite
  • State Management: Pinia
  • Routing: Vue Router 4
  • Styling: Scoped CSS + SCSS, Bootstrap 5
  • Layout: Fully Responsive SPA
  • Documentation: Included

Icons

  • Font Awesome 5+
  • Flaticon (food & Japanese dining icons)

Fonts Used

Image Credit

  • All images used in the preview are for demonstration purposes only and are NOT included in the download package.
  • Image credits: Unsplash, Pexels

Changelog

Version 1.0 (Initial Release)
- Full Vue 3 Composition API conversion
- 18 pages as single-file components
- Pinia stores for menu, gallery, reservations
- Vue Router 4 with lazy-loaded routes
- VeeValidate reservation form
- Vue transitions with Japanese-inspired easing
- Dark-and-gold SCSS theming
- Responsive across all breakpoints

Production code · accessibility ready

Open the source. Read the actual code.

Every Fattsushi — Sushi Vue.js Template template ships hand-written, semantic, and accessibility-ready. Tabs preserved. Comments in plain English. BEM naming. WCAG 2.2 AA tested. No spaghetti, no inline JavaScript scattered through the document. Your team extends without rewriting — and your users get a site that works for screen readers, keyboard navigation, and reduced-motion preferences out of the box.

Semantic HTML5Real <section> / <article> / <nav> tags — not div soup.
WCAG 2.2 AA accessibilityReal ARIA, focus order, 4.5:1+ color contrast, keyboard nav.
BEM class systemPredictable naming so your team can extend without breaking.
Reduced-motion respectedprefers-reduced-motion media query disables non-essential transitions.
Skip-link + landmark rolesScreen-reader-friendly navigation at every page top.
Lighthouse 100 a11yAudited per release. Default install scores 100 / 96 / 100 / 100.
hero.html hero.css hero.js
fattsushi-sushi-vue-js-template/hero · v1.0.0 · WCAG 2.2 AA
1<!-- Fattsushi — Sushi Vue.js Template hero — semantic, accessible, AICE-priced -->
2<section class="hero hero--cover" role="region" aria-label="Featured">
3 <div class="hero__inner">
4 <h1 class="hero__h1">Built for businesses <em>that ship</em></h1>
5 <a class="btn btn--primary" href="/shop">Shop now</a>
6 </div>
7</section>
8
9/* hero.css — focus-visible & reduced-motion respected */
10.hero :focus-visible { outline: 2px solid var(--c-cyan); }
11@media (prefers-reduced-motion: reduce) { .hero * { animation: none !important; } }
12
13// AICE rebuild cost manifest
14const aice = { claude: '$2,400', buy: '$21' };
Changelog · 1 version

What's changed.

  • Initial release.
  • Vue 3 with Composition API; reactive state and reusable components.
  • Detailed documentation included with quick-start guide.
Tags
Customer reviews · 0 verified

What customers actually said.

No reviews yet — be the first.

Managed launch · 2 hosting tiers · NYC infrastructure

Don’t have hosting? We launch Fattsushi — Sushi Vue.js Template for you.

Skip cPanel. Skip the FTP upload. Skip the DNS configuration. Each hosting tier includes the install, plugin config, and your domain pointed live in 24 hours. Same NYC team that built the template handles your launch.

99.9%Uptime SLA
24hSetup time
NYCSame-day support
Starter
$9.99/mo
  • 1 Website
  • 10 GB Storage
  • Free SSL
  • 1 Database
Deluxe
$27.99/mo
  • 10 Websites
  • 50 GB Storage
  • Free SSL (all sites)
  • 25 Databases
Ultimate
$35.99/mo
  • 25 Websites
  • 75 GB Storage
  • Free SSL (all sites)
  • 50 Databases
Launch
$62.99/mo
  • 100 GB Storage
  • 4 GB RAM
  • 2 CPUs
  • Free SSL
Grow
$155.99/mo
  • 300 GB Storage
  • 16 GB RAM
  • 8 CPUs
  • Free SSL
Expand
$217.99/mo
  • 400 GB Storage
  • 32 GB RAM
  • 16 CPUs
  • Free SSL

Free SSL · 99.9% uptime · 24/7 support · No domain included

Every tier includes — NYC infrastructure

99.9%Uptime SLAMonitored 24/7
24hSetup timeSame business day
SSLHTTPS day oneAuto-renewed
CDNGlobal edge cache15 PoPs worldwide
DailyAuto backups30-day retention
NYCStudio supportSame-day response
From the NYC studio

Save $5 on Fattsushi — Sushi Vue.js Template today.

Plus weekly drops · AICE rebuild reports · early access to designs we haven't listed publicly. Same email goes to designers shipping with Letam, Bunlicious, and Aiga.

No spam · unsubscribe anytime · 3,500+ designers ship from this list

Fattsushi — Sushi Vue.js Template
$21 · Vue Templates