Fattsushi — Sushi Vue.js Template

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

• Playfair Display
• Poppins

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