nuxt

Nuxt Best Practices

Overview

Aspect	Recommendation
Version	Nuxt 3.x / 4.x
Vue	Vue 3 Composition API
Data Fetching	useFetch / useAsyncData
State	useState / Pinia
Styling	Tailwind CSS or UnoCSS

---

Project Structure

app/                      # Nuxt 4 app directory
├── pages/
│   ├── index.vue
│   ├── about.vue
│   └── users/
│       ├── index.vue
│       └── [id].vue
├── components/
│   ├── AppHeader.vue
│   └── ui/
├── composables/
│   ├── useAuth.ts
│   └── useApi.ts
├── layouts/
│   ├── default.vue
│   └── auth.vue
├── middleware/
│   └── auth.ts
└── plugins/
server/
├── api/
│   └── users/
│       ├── index.get.ts
│       └── [id].get.ts
├── middleware/
└── utils/
public/
nuxt.config.ts

---

Data Fetching

useFetch (Recommended)

<script setup lang="ts">
// Basic fetch
const { data: posts, status } = await useFetch('/api/posts')

// With options
const { data: user, refresh, error } = await useFetch(`/api/users/${id}`, {
  query: { include: 'profile' },
  headers: { Authorization: `Bearer ${token}` },
  transform: (data) => data.user,
})

// POST request
const { data } = await useFetch('/api/users', {
  method: 'POST',
  body: { name: 'John', email: '[email protected]' },
})
</script>

<template>
  <div v-if="status === 'pending'">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <div v-else>{{ posts }}</div>
</template>

useAsyncData (For Complex Logic)

<script setup lang="ts">
const route = useRoute()

const { data, status, error } = await useAsyncData(
  `user-${route.params.id}`,
  async () => {
    const [user, posts] = await Promise.all([
      $fetch(`/api/users/${route.params.id}`),
      $fetch(`/api/users/${route.params.id}/posts`),
    ])
    return { user, posts }
  }
)
</script>

Lazy Fetching (Non-blocking)

<script setup lang="ts">
// Navigation happens immediately, data loads in background
const { data, status } = await useLazyFetch('/api/heavy-data')
</script>

<template>
  <div v-if="status === 'pending'">
    <Skeleton />
  </div>
  <div v-else>
    {{ data }}
  </div>
</template>