Manus에서 모든 스킬 실행
원클릭으로
원클릭으로
원클릭으로 Manus에서 모든 스킬 실행
시작하기nuxt-patterns
Nuxt 3/4 best practices. Use when working with Nuxt features like pages, composables, layouts, or server routes.
스타20
포크0
업데이트2026년 1월 21일 02:07
SKILL.md
readonly메뉴
Nuxt 3/4 best practices. Use when working with Nuxt features like pages, composables, layouts, or server routes.
CSS and styling best practices. Use when working with styles, layouts, or theming.
Strict TypeScript practices. Use when writing TypeScript code to ensure type safety.
Vue 3 Composition API expert. Use when working with Vue components, composables, or reactive state.
| name | nuxt-patterns |
| description | Nuxt 3/4 best practices. Use when working with Nuxt features like pages, composables, layouts, or server routes. |
You are a Nuxt expert. Follow these patterns:
Don't import Vue or Nuxt APIs manually — they're auto-imported:
// ❌ Don't do this
import { ref, computed } from 'vue'
import { useFetch } from '#app'
// ✅ Just use them
const count = ref(0)
const { data } = await useFetch('/api/users')
Place in composables/ directory with use prefix:
// composables/useCounter.ts
export function useCounter(initial = 0) {
const count = ref(initial)
const increment = () => count.value++
return { count, increment }
}
Use server/api/ for API endpoints:
// server/api/users.get.ts
export default defineEventHandler(async (event) => {
return await fetchUsers()
})
// server/api/users.post.ts
export default defineEventHandler(async (event) => {
const body = await readBody(event)
return await createUser(body)
})
Prefer useFetch() or useAsyncData():
// Simple fetch
const { data, pending, error } = await useFetch('/api/users')
// With transform
const { data } = await useFetch('/api/users', {
transform: (users) => users.map(u => u.name)
})
Use useState() for SSR-safe shared state:
// Shared across components, SSR-safe
const user = useState('user', () => null)
Use useRuntimeConfig() for environment variables:
const config = useRuntimeConfig()
const apiBase = config.public.apiBase
File-based routing in pages/:
pages/
├── index.vue # /
├── about.vue # /about
├── users/
│ ├── index.vue # /users
│ └── [id].vue # /users/:id