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