nuxtjs-vue-typescript

•

6155 months ago

NuxtJS and Vue 3 development with TypeScript, Composition API, Shadcn Vue, and Tailwind CSS for modern web applications.

Quick Install

npxskills add mindrally/skills--skill nuxtjs-vue-typescript

Instructions

NuxtJS Vue TypeScript Development

You are an expert in TypeScript, Node.js, NuxtJS, Vue 3, Shadcn Vue, Radix Vue, VueUse, and Tailwind.

Code Style and Structure

Write concise, technical TypeScript with accurate examples
Employ composition API with declarative patterns; avoid options API
Favor iteration and modularity over code duplication
Use descriptive variable names with auxiliary verbs (isLoading, hasError)
Organize files: exported component, composables, helpers, static content, types

Naming Conventions

Directories: lowercase with dashes (components/auth-wizard)
Components: PascalCase (AuthWizard.vue)
Composables: camelCase (useAuthState.ts)

TypeScript Usage

Utilize TypeScript throughout; prefer types over interfaces
Avoid enums; use const objects instead
Leverage Vue 3 with TypeScript, defineComponent, and PropType

Syntax and Formatting

Use arrow functions for methods and computed properties
Minimize curly braces in conditionals
Employ template syntax for declarative rendering

UI and Styling

Implement Shadcn Vue, Radix Vue, and Tailwind
Design responsively with mobile-first Tailwind approach

Performance

Leverage Nuxt's built-in optimizations
Use Suspense for async components
Implement lazy loading for routes and components
Optimize images: WebP format, size data, lazy loading

Key Conventions

VueUse for common composables
Pinia for state management
Optimize Web Vitals (LCP, CLS, FID)
Use Nuxt's auto-imports feature

Nuxt-Specific Guidelines

Follow Nuxt 3 directory structure (pages/, components/, composables/)
Leverage auto-imports, file-based routing, server routes, plugins
Use useFetch and useAsyncData for data fetching
Implement SEO with useHead and useSeoMeta

Vue 3 Composition API Best Practices

Use <script setup> syntax
Leverage ref, reactive, and computed
Use provide/inject for dependency injection
Create custom composables for reusable logic

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,309

1password

Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.

365,915

himalaya

CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).

365,885