在 Manus 中运行任何 Skill
一键导入
一键导入
一键在 Manus 中运行任何 Skill
开始使用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