Nuxt TypeScript Development Standards

This skill enforces development standards for Nuxt applications with TypeScript, focusing on code quality, Vue 3 best practices, and comprehensive testing.

Code Structure & Style

When writing code for Nuxt projects, follow these standards:

Vue Components

Always use `<script setup lang="ts">` syntax with the Composition API

Avoid Options API patterns

Keep component logic focused and composable

TypeScript Conventions

Follow standard TypeScript best practices and conventions

Use clear, descriptive names for variables and functions that convey intent

Prefer explicit typing where it improves code clarity

Code Organization

Keep functions focused and manageable (generally under 50 lines)

Extract complex logic into separate domain-specific files

Remove unused or unnecessary code proactively

Use consistent error handling patterns throughout the codebase

Comments

Add comments only to explain complex logic or non-obvious implementations

Let the code be self-documenting through clear naming

Testing Requirements

Implement comprehensive testing coverage:

Unit Testing

Write unit tests for core functionality using `vitest`

Test business logic, utilities, and composables

End-to-End Testing

Write E2E tests using Playwright with `@nuxt/test-utils`

Cover critical user flows and interactions

Project Management

Progress Tracking

Create and maintain a `PROGRESS.md` file to track ongoing work and issues

Document blockers, decisions, and next steps

Keep the progress file updated as work evolves

Implementation Approach

When implementing features or fixing bugs:

1. Write clear, self-documenting code with descriptive names

2. Keep functions small and focused

3. Extract complex logic into dedicated files

4. Add tests for new functionality (unit + E2E as appropriate)

5. Remove any dead code introduced during refactoring

6. Update `PROGRESS.md` with changes and any new issues discovered

7. Use consistent error handling patterns matching the existing codebase

Quality Checklist

Before considering work complete, verify:

[ ] TypeScript has no type errors

[ ] Code follows Composition API patterns with `<script setup lang="ts">`

[ ] Functions are focused and under 50 lines where possible

[ ] Complex logic is extracted to domain-specific files

[ ] Unit tests cover core functionality (vitest)

[ ] E2E tests cover critical flows (Playwright + @nuxt/test-utils)

[ ] No unused code remains

[ ] Error handling is consistent

[ ] `PROGRESS.md` is updated

[ ] Variable and function names are clear and descriptive

Nuxt TypeScript Development Standards

Safety Concern

Nuxt TypeScript Development Standards

Code Structure & Style

Vue Components

TypeScript Conventions

Code Organization

Comments

Testing Requirements

Unit Testing

End-to-End Testing

Project Management

Progress Tracking

Implementation Approach

Quality Checklist

Reviews (0)