---
globs: *.vue,*.js
---

# Vue.js Coding Standards

## Vue Component Structure
Luôn sử dụng Composition API với `<script setup>`:

```vue
<script setup>
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores'

// Props
const props = defineProps({
  title: String,
  items: Array
})

// Emits
const emit = defineEmits(['update', 'delete'])

// Reactive data
const isLoading = ref(false)
const data = ref([])

// Computed
const filteredData = computed(() => {
  return data.value.filter(item => item.active)
})

// Methods
const handleSubmit = () => {
  emit('update', data.value)
}

// Lifecycle
onMounted(() => {
  fetchData()
})
</script>
```

## Naming Conventions
- **Components**: PascalCase (VD: `UserProfile.vue`)
- **Files**: PascalCase cho components, camelCase cho utilities
- **Variables**: camelCase
- **Constants**: UPPER_SNAKE_CASE
- **Props**: camelCase
- **Events**: kebab-case

## Import Organization
```javascript
// 1. Vue core
import { ref, computed, onMounted } from 'vue'

// 2. Third-party libraries
import axios from 'axios'
import moment from 'moment'

// 3. Internal stores
import { useUserStore } from '@/stores'

// 4. Internal services
import { userService } from '@/services'

// 5. Internal components
import UserCard from '@/components/UserCard.vue'

// 6. Relative imports
import './component.css'
```

## Template Best Practices
- Sử dụng `v-if` thay vì `v-show` khi có thể
- Sử dụng `:key` cho `v-for`
- Tránh inline styles, sử dụng CSS classes
- Sử dụng `scoped` styles khi cần thiết

## Error Handling
```javascript
// Trong services
try {
  const response = await apiClient.get('/api/users')
  return response.data
} catch (error) {
  console.error('Error fetching users:', error)
  throw error
}

// Trong components
const fetchData = async () => {
  try {
    isLoading.value = true
    data.value = await userService.getUsers()
  } catch (error) {
    // Handle error
    console.error('Failed to fetch data:', error)
  } finally {
    isLoading.value = false
  }
}
```

## State Management với Pinia
```javascript
// stores/userStore.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', () => {
  const user = ref(null)
  const isAuthenticated = computed(() => !!user.value)
  
  const login = async (credentials) => {
    // Login logic
  }
  
  const logout = () => {
    user.value = null
  }
  
  return { user, isAuthenticated, login, logout }
})
```