nuxtjs-import-enforcerlisted
Install: claude install-skill smicolon/ai-kit
# Nuxt.js Import Convention Enforcer
## Activation Triggers
This skill activates when:
- Writing imports in Vue/TS files
- Creating new files
- Modifying existing files with imports
## Import Order
1. Vue/Nuxt built-ins (usually auto-imported)
2. Third-party packages
3. Composables (auto-imported from ~/composables/)
4. Components (auto-imported from ~/components/)
5. Types
## Pattern
```vue
<script setup lang="ts">
// 1. Vue (only if explicitly needed - usually auto-imported)
import { ref, computed, watch } from 'vue'
// 2. Third-party
import { z } from 'zod'
import dayjs from 'dayjs'
// 3. Composables (only if not auto-imported)
import { useAuth } from '~/composables/useAuth'
// 4. Types
import type { User } from '~/types/user'
// Implementation
const user = ref<User | null>(null)
</script>
```
## Path Aliases
```typescript
// CORRECT - Use ~/ alias
import { useAuth } from '~/composables/useAuth'
import type { User } from '~/types/user'
import { formatDate } from '~/utils/date'
// WRONG - Relative imports
import { useAuth } from '../../../composables/useAuth'
// WRONG - @ alias (use ~/ for Nuxt)
import { useAuth } from '@/composables/useAuth'
```
## Auto-Import Awareness
Nuxt auto-imports these - DON'T import explicitly:
### Vue Composition API
```typescript
// DON'T import - auto-imported
ref, reactive, computed, watch, watchEffect, toRef, toRefs
onMounted, onUnmounted, onBeforeMount, onBeforeUnmount
provide, inject
```
### Nuxt Composables
```typescript