Nodejs Development

---
created: 2025-12-16
modified: 2026-07-28
reviewed: 2025-12-16
name: nodejs-development
description: "Node.js development with Bun, Vite, Vue 3, Pinia, TypeScript. Use when the user mentions Node.js, Bun, Vite, Vue, Pinia, npm, pnpm, or modern JS/TS frameworks."
user-invocable: false
allowed-tools: Glob, Grep, Read, Bash, Edit, Write, TodoWrite, WebFetch, WebSearch, NotebookEdit
---

# Node.js Development

Expert knowledge for modern JavaScript/TypeScript development with focus on high-performance tooling and frameworks.

## When to Use This Skill

| Scenario | Use this skill | Alternative |
|----------|---------------|-------------|
| Setting up a Vue 3/Vite/TypeScript project | Yes | N/A |
| Configuring Vite build and dev server | Yes | N/A |
| Working with Vue 3 Composition API and Pinia | Yes | N/A |
| General Node.js/Bun runtime guidance | Yes | `bun-development` for Bun-specific features |
| Running Bun scripts, tests, or builds | No - use `bun-development` | `bun-test`, `bun-build` for quick invocations |
| Managing npm/Bun dependencies | No - use `bun-package-manager` | `bun-add` for quick additions |
| Debugging TypeScript/JS applications | No - use `typescript-debugging` | N/A |
| Error monitoring with Sentry | No - use `typescript-sentry` | N/A |

## Core Expertise

**Modern JavaScript Tooling**
- **Bun**: Primary JavaScript runtime and package manager (25x faster than npm)
- **Vite**: Lightning-fast build tool with HMR and optimized production builds
- **TypeScript**: Type-safe development with modern configurations
- **ESM**: Modern module syntax and tree-shaking optimization

## Key Capabilities

**Bun Runtime & Package Management**
- Use `bun install` for dependency installation and `bun.lock` for reproducible builds
- Implement `bun run` for script execution and `bun dev`/`bun build` patterns
- Configure `bunfig.toml` for project-specific Bun settings
- Leverage Bun's native TypeScript support and built-in bundler

**Vue 3 & Modern Frontend**
- **Vue 3**: Composition API, script setup, and reactive patterns
- **Pinia**: State management with TypeScript support
- **Vuetify**: Material Design components
- **Vite**: Fast development server with instant HMR

**TypeScript Excellence**
- Configure TypeScript with strict mode and modern target settings
- Implement comprehensive type definitions for Vue components and stores
- Use TypeScript with Vite for optimal development experience
- Apply advanced TypeScript patterns for robust applications

**Testing & Quality Assurance**
- **Vitest**: Fast unit testing framework with native TypeScript support
- **Playwright**: End-to-end testing with browser automation
- **Biome**: Code quality and formatting (unified, fast)

**Debugging**
- **Chrome DevTools**: Advanced debugging for browser and Node.js
- **Node.js Inspector**: Built-in debugging with breakpoints and profiling
- **Heap Snapshots**: Memory leak detection and heap analysis
- **Performance Profiling**: CPU profiling, flame graphs, bottleneck identification
- **Vue DevTools**: Component tree, state inspection, performance monitoring

## Essential Commands

```bash
# Bun-first workflow
bun create vite my-app --template vue-ts  # Create Vue 3 + TypeScript project
cd my-app && bun install                  # Install dependencies

# Development
bun dev                          # Start dev server
bun build                        # Build for production
bun run check                    # Run Biome lint + format
bun run test                     # Run tests

# Debugging
node --inspect script.js         # Node.js debugging
bun --inspect script.ts          # Bun debugging
node --prof script.js            # CPU profiling
```

## Best Practices

**Project Structure**
- Organize Vue 3 projects with clear component, store, and router separation
- Configure `vite.config.ts` with optimizations
- Implement proper error boundaries and loading states
- Use Vue 3's Teleport and Suspense for advanced UI patterns

**Performance & Security**
- Implement proper CSP headers and security configurations
- Optimize images and assets with Vite's asset handling
- Use lazy loading and code splitting
- Apply proper form validation and sanitization

**Type Safety**
```typescript
// Modern type annotations (TypeScript 5.0+)
function processData(
    items: string[],
    config: Record<string, number>,
    optional?: string | null
): [boolean, string] {
    return [true, "success"];
}
```

For detailed debugging patterns, Vue 3 component structure, Vite configuration, production debugging, and framework integration, see REFERENCE.md.