IndieShow-Starter-Nuxt Tailwind Templates

Indieshow Starter Nuxt

๐Ÿš€ Starter for indie Product Show Crafted with a focus on developer experience:๐Ÿ–ฅ๏ธ Nuxt + ๐Ÿ› ๏ธ TypeScript + ๐ŸŽจ Tailwind CSS + ๐ŸŒ i18n + ๐Ÿ“„ markdown-it + ๐Ÿ” ESLint + ๐Ÿงฉ simple-git-hooks + ๐Ÿงน Lint-Staged + ๐Ÿ“ Commitlint + โ˜๏ธ Vercel. Launch your global-ready web app with a sleek, performant, and SEO-optimized foundation.

๐ŸŒ English | ็ฎ€ไฝ“ไธญๆ–‡

IndieShow

IndieShow: ๐Ÿš€ Boilerplate and Starter for indie Product Show for Nuxt 3, Tailwind CSS, and TypeScript.

Crafted with a focus on developer experience: ๐Ÿ–ฅ๏ธ Nuxt 3 + ๐Ÿ› ๏ธ TypeScript + ๐ŸŽจ Tailwind CSS + ๐ŸŒ i18n + ๐Ÿ“„ markdown-it + ๐Ÿ” ESLint + ๐Ÿงฉ simple-git-hooks + ๐Ÿงน Lint-Staged + ๐Ÿ“ Commitlint + โ˜๏ธ Vercel. Launch your global-ready web app with a sleek, performant, and SEO-optimized foundation.

๐Ÿ’ก Project Overview

IndieShow is a product showcase website template designed specifically for indie developers. Built with Nuxt 3 + TailwindCSS + TypeScript, you can create a professional product showcase website in minutes with simple configuration!

๐ŸŽฏ Use Cases

  • ๐Ÿข Product showcase for startups
  • ๐Ÿ‘จโ€๐Ÿ’ป Portfolio for indie developers
  • ๐Ÿ› ๏ธ Quick start template for development

โšก Performance

Test Item Score Baseline
Google PageSpeed (Mobile) 94 > 90
Google PageSpeed (Desktop) 99 > 90
Mobile Performance
IndieShow-pagespeed-mobile
Desktop Performance
IndieShow-pagespeed-pc

๐ŸŒˆ Live Demo

IndieShow banner IndieShow-MyWorkWithFooter

๐Ÿ› ๏ธ Tech Stack

๐Ÿ“ฆ Project Structure

IndieShow/
โ”œโ”€โ”€ components/        # Components Directory
โ”‚   โ”œโ”€โ”€ blocks/       # Block Components (Hero, Feature, ShowCase, CTA)
โ”‚   โ”œโ”€โ”€ common/       # Common Components (Theme Switch, Language Switch)
โ”‚   โ”œโ”€โ”€ layout/       # Layout Components (Header, Footer)
โ”‚   โ””โ”€โ”€ ui/           # UI Components (Back to Top, Progress Bar, QR Code Modal, etc.)
โ”œโ”€โ”€ composables/      # Composables
โ”‚   โ”œโ”€โ”€ useLocale     # Language Switch
โ”‚   โ”œโ”€โ”€ useMarkdown   # Markdown Parser
โ”‚   โ””โ”€โ”€ useSeo        # SEO Optimization
โ”œโ”€โ”€ config/           # Configuration Files
โ”‚   โ”œโ”€โ”€ nav          # Navigation Menu
โ”‚   โ”œโ”€โ”€ seo          # SEO Configuration
โ”‚   โ”œโ”€โ”€ showcase     # Work Showcase
โ”‚   โ”œโ”€โ”€ social       # Social Links
โ”‚   โ””โ”€โ”€ theme        # Theme Configuration
โ”œโ”€โ”€ i18n/            # Internationalization
โ”‚   โ”œโ”€โ”€ en/          # English Language Pack
โ”‚   โ”œโ”€โ”€ zh/          # Chinese Language Pack
โ”‚   โ””โ”€โ”€ config.ts    # i18n Configuration
โ”œโ”€โ”€ layouts/         # Layout Templates
โ”œโ”€โ”€ pages/           # Page Files
โ”‚   โ”œโ”€โ”€ group.ts       # User Group Page
โ”‚   โ”œโ”€โ”€ index.ts       # Home Page
โ”‚   โ”œโ”€โ”€ privacy.ts     # Privacy Policy Page
โ”‚   โ”œโ”€โ”€ sales.ts       # Sales Terms Page
โ”‚   โ”œโ”€โ”€ terms.ts       # Terms of Service Page
โ”œโ”€โ”€ plugins/         # Plugins Directory
โ”‚   โ””โ”€โ”€ analytics-google.client.ts  # Google Analytics
โ”œโ”€โ”€ public/          # Static Assets
โ””โ”€โ”€ types/           # Type Definitions

โœจ Core Features

๐Ÿš€ Development Experience

  • Using latest dependency versions with continuous updates
  • Clean and elegant code with Composition API and <script setup>
  • Complete TypeScript type support
  • Integrated antfu/eslint-config for consistent code style

๐ŸŽจ UI Design

  • Responsive design based on TailwindCSS
  • Light/Dark theme with system theme following
  • Beautiful transitions and page effects
  • Customizable theme colors

๐ŸŒ Internationalization

  • English and Chinese support, easily extensible
  • Automatic browser language detection
  • Simple configuration, instant translation updates
  • Automatic language prefix in URLs

๐Ÿ“ฑ Multi-platform Adaptation

  • Perfect adaptation for mobile and desktop
  • PWA support, installable to home screen
  • Optimized interaction for different devices

๐Ÿ” SEO Optimization

  • SSR support based on Nuxt 3
  • Automatic sitemap.xml generation
  • Static page pre-rendering
  • Complete Meta tag support
  • Customizable page titles and descriptions

โšก๏ธ Performance Optimization

  • Automatic code splitting
  • Smart component preloading
  • Automatic image optimization
  • On-demand icon loading

๐Ÿš€ Quick Start

Requirements

  • Node.js โ‰ฅ 18.0
  • pnpm โ‰ฅ 8.0

Development Process

  1. Clone Project
git clone https://github.com/WaveAny/IndieShow-Starter-Nuxt.git
cd IndieShow
pnpm install
  1. Configure Environment Variables
cp .env.example .env
  1. Start Development Server
pnpm dev
  1. Build and Deploy
# Build for production
pnpm build

# Preview production build
pnpm preview
  1. One-Click Deploy

Recommended deployment with Vercel:

๐Ÿค” FAQ

1. How to customize themes?

Edit config/theme.ts file:

export const themeColors = {
  primary: {
    color: "indigo",
    hex: "#4f46e5",
    gradient: {
      dark: "#6366f1",
    },
  },
  gray: {
    color: "zinc",
  },
}

๐Ÿ“„ License

This project is licensed under the MIT License.

๐Ÿ™ Acknowledgments

  • Nuxt 3 - Vue.js Full-stack Framework
  • Vue 3 - Progressive JavaScript Framework
  • Tailwind CSS - Utility-First CSS Framework

๐Ÿ“ฎ Contact

๐Ÿ“ˆ Project Statistics''

''

๐ŸŽจ Theme Preview

Light Theme
IndieShow-light
Dark Theme
IndieShow-dark

๐Ÿ“ˆ Star History

Top categories

Loading Svelte Themes