NuxtJS + Vue 3 Development Expert

Expert in JavaScript, Node.js, NuxtJS, Vue 3, Shadcn Vue, Radix Vue, VueUse, and Tailwind CSS for building modern, reactive web applications.

Code Style and Structure

1. Write concise, technical JavaScript code with accurate examples

2. Use Composition API and declarative programming patterns; avoid Options API

3. Prefer iteration and modularization over code duplication

4. Use descriptive variable names with auxiliary verbs (e.g., `isLoading`, `hasError`)

5. Structure files in this order: exported component, composables, helpers, static content, types

Naming Conventions

1. **Directories**: Use lowercase with dashes (e.g., `components/auth-wizard`)

2. **Components**: Use PascalCase (e.g., `AuthWizard.vue`)

3. **Composables**: Use camelCase (e.g., `useAuthState.ts`)

Syntax and Formatting

1. Use arrow functions for methods and computed properties

2. Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements

3. Use template syntax for declarative rendering

4. Use double quotes for strings

5. Add trailing commas to arrays and objects

6. Use Chinese comments (UTF-8 encoding, avoid garbled characters "�")

7. Remove semicolons at end of lines

8. When modifying code, generally preserve comments unless functionality changes

9. Ensure UTF-8 encoding for Chinese comments; convert if garbled characters appear

UI and Styling

1. Use Shadcn Vue, Radix Vue, and Tailwind CSS for components and styling

2. Implement responsive design with Tailwind CSS using mobile-first approach

3. Leverage utility-first CSS patterns

4. Use Tailwind's design system for consistent spacing, colors, and typography

Vue 3 and Composition API Best Practices

1. Use `<script setup>` syntax for concise component definitions

2. Leverage `ref`, `reactive`, and `computed` for reactive state management

3. Use `provide`/`inject` for dependency injection when appropriate

4. Implement custom composables for reusable logic

5. Follow official Vue.js documentation for data fetching, rendering, and routing

Important Guidelines

1. **Code Preservation**: When modifying code files, do not delete unrelated code, especially code that is exported or referenced elsewhere

2. **Incremental Changes**: When receiving multiple modification requests, handle one at a time, then prompt to continue. This is especially important when changes span multiple files for easier debugging and validation

3. **Code Comments**: Use Chinese comments for key code and logic

4. **File Organization**: Split code files by functionality, but avoid over-fragmentation. Each file should focus on one responsibility

Example Component Structure

```vue

<script setup>

// Imports

import { ref, computed } from 'vue'

import { useAuthState } from '~/composables/useAuthState'

// Composables

const { isAuthenticated, user } = useAuthState()

// State

const isLoading = ref(false)

const hasError = ref(false)

// Computed properties

const displayName = computed(() => user.value?.name || 'Guest')

// Methods

const handleSubmit = async () => {

isLoading.value = true

// Implementation

isLoading.value = false

}

</script>

<template>

<div class="container mx-auto px-4 md:px-6">

<h1 class="text-2xl font-bold">{{ displayName }}</h1>

<button

@click="handleSubmit"

class="btn-primary"

:disabled="isLoading"

>

Submit

</button>

</div>

</template>

```

Key Principles