Electron + Vue 3 + TSX + tRPC + Tailwind CSS Boilerplate

A modern, type-safe desktop application boilerplate combining the power of Electron with Vue 3, TypeScript, tRPC, and Tailwind CSS.

🚀 Features

• ⚡ Electron - Build cross-platform desktop apps with web technologies
• 🖖 Vue 3 - Progressive JavaScript framework with Composition API
• 📘 TypeScript - Type-safe development experience
• 🔄 tRPC - End-to-end typesafe APIs with real-time subscriptions
• 🎨 Tailwind CSS - Utility-first CSS framework
• ⚛️ TSX Support - Write Vue components with JSX syntax
• 🔧 Vite - Fast build tool and development server
• 📦 Electron Builder - Package and distribute your app
• 🧹 ESLint - Code linting and formatting

📋 Requirements

• Node.js: >= 20.0.0
• Yarn: >= 1.22.22

🛠️ Installation

1. Clone the repository:

git clone https://github.com/dortanes/electron-vue3-tsx-trpc-tailwind-boilerplate.git
cd electron-vue3-tsx-trpc-tailwind-boilerplate

2. Install dependencies:

yarn install

🚀 Development

Start the development server:

yarn dev

This will:

• Start the Vite development server
• Launch the Electron app with hot reload
• Open DevTools automatically

🏗️ Build

Build the application for production:

yarn build

This will:

• Run ESLint checks
• Build the renderer process with Vite
• Build the main process
• Package the app with Electron Builder

📁 Project Structure

├── electron/                 # Electron main process
│   ├── main/
│   │   ├── api/             # tRPC API routes
│   │   │   └── index.ts     # API router definition
│   │   └── index.ts         # Main process entry
│   └── preload/
│       └── index.ts         # Preload script
├── src/                     # Vue renderer process
│   ├── assets/              # Static assets
│   ├── App.tsx              # Root Vue component
│   ├── api.ts               # tRPC client setup
│   ├── main.ts              # Vue app entry
│   └── vite-env.d.ts        # Vite type definitions
├── build/                   # Build resources
├── public/                  # Public assets
├── package.json             # Dependencies and scripts
├── vite.config.ts           # Vite configuration
├── tsconfig.json            # TypeScript configuration
└── electron-builder.json5   # Electron Builder config

🔌 tRPC Integration

This boilerplate includes a fully configured tRPC setup:

Server (Main Process)

• Located in electron/main/api/index.ts
• Includes example query and subscription procedures
• Uses Zod for input validation
• Supports real-time communication via EventEmitter

Client (Renderer Process)

• Located in src/api.ts
• Configured with ipcLink for IPC communication
• Fully type-safe API calls

Example Usage

// In your Vue component
import { api } from './api'

// Query example
const greeting = await api.greeting.query({ name: 'World' })
console.log(greeting.text) // "Hello World"

// Subscription example
api.sub.subscribe(undefined, {
  onData: (data) => {
    console.log('Received:', data.text)
  }
})

🎨 Styling with Tailwind CSS

Tailwind CSS is pre-configured and ready to use:

// Example component with Tailwind classes
export default defineComponent({
  render() {
    return (
      <div class="flex items-center justify-center h-screen bg-gray-100">
        <h1 class="text-4xl font-bold text-blue-600">
          Hello Electron + Vue 3!
        </h1>
      </div>
    )
  }
})

📝 Scripts

• yarn dev - Start development server
• yarn build - Build for production
• yarn preview - Preview production build
• yarn lint - Run ESLint
• yarn lint:fix - Fix ESLint issues

🌍 Platform Support

• Windows (win32)
• macOS (darwin)
• Linux

Supports both x64 and arm64 architectures.

📦 Dependencies

Core Dependencies

• electron-trpc - tRPC integration for Electron
• @trpc/client & @trpc/server - tRPC core
• tailwindcss & @tailwindcss/vite - Styling
• zod - Schema validation
• vue - Vue 3 framework

Development Dependencies

• electron - Electron framework
• electron-builder - App packaging
• vite - Build tool
• typescript - TypeScript compiler
• eslint - Code linting
• Various Vite plugins for Vue and Electron integration

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

dortanes

• GitHub: @dortanes

---

⭐ If you find this boilerplate helpful, please consider giving it a star!