Nuxt Features Guide

pages/
├── index.vue              → /
├── about.vue              → /about
├── blog/
│   ├── index.vue         → /blog
│   └── [id].vue          → /blog/:id
└── user/
    └── [username]/
        └── profile.vue   → /user/:username/profile

<!-- pages/blog/[id].vue -->
<template>
  <div>
    <h1>Blog Post: {{ route.params.id }}</h1>
  </div>
</template>

<script setup>
const route = useRoute()
// Access params: route.params.id
</script>

<!-- pages/docs/[...slug].vue -->
<template>
  <div>
    <h1>Docs: {{ route.params.slug.join('/') }}</h1>
  </div>
</template>

<script setup>
const route = useRoute()
// /docs/getting-started → ['getting-started']
// /docs/guide/installation → ['guide', 'installation']
</script>

<!-- layouts/default.vue -->
<template>
  <div>
    <AppHeader />
    <slot /> <!-- Page content -->
    <AppFooter />
  </div>
</template>

<!-- pages/index.vue -->
<script setup>
definePageMeta({
  layout: 'default' // or 'dashboard', 'auth', etc.
})
</script>

<script setup>
// Fetches on server and client
const { data, pending, error, refresh } = await useFetch('/api/users')
</script>

<template>
  <div>
    <p v-if="pending">Loading...</p>
    <p v-else-if="error">Error: {{ error.message }}</p>
    <ul v-else>
      <li v-for="user in data" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
    <button @click="refresh">Refresh</button>
  </div>
</template>

<script setup>
const route = useRoute()

const { data: post } = await useAsyncData(
  'post-' + route.params.id, // Unique key
  () => $fetch(`/api/posts/${route.params.id}`)
)
</script>

<script setup>
// Non-blocking, fetches on client
const { pending, data } = useLazyFetch('/api/posts')
</script>

<template>
  <div>
    <!-- Component renders immediately -->
    <p v-if="pending">Loading posts...</p>
    <PostList v-else :posts="data" />
  </div>
</template>

const { data } = await useFetch('/api/users', {
  method: 'POST',
  body: { name: 'John' },
  headers: { 'Authorization': 'Bearer token' },

  // Cache options
  lazy: false,
  server: true,
  immediate: true,

  // Transformations
  transform: (data) => data.users,
  default: () => [],

  // Watch dependencies
  watch: [someRef],

  // Error handling
  onRequest({ request, options }) {},
  onResponse({ response }) {},
  onResponseError({ response }) {}
})

// composables/useAuth.ts
export const useAuth = () => {
  const user = useState('user', () => null)
  const isLoggedIn = computed(() => !!user.value)

  const login = async (credentials) => {
    const data = await $fetch('/api/login', {
      method: 'POST',
      body: credentials
    })
    user.value = data.user
  }

  const logout = () => {
    user.value = null
  }

  return {
    user,
    isLoggedIn,
    login,
    logout
  }
}

// Usage in any component (auto-imported!)
<script setup>
const { user, isLoggedIn, logout } = useAuth()
</script>

<script setup>
const router = useRouter()
const route = useRoute()

// Navigation
const goToPost = (id) => {
  router.push(`/blog/${id}`)
  // or router.push({ path: '/blog', query: { id } })
}

// Access params/query
console.log(route.params.id)
console.log(route.query.sort)
</script>

<!-- composables/useCounter.ts -->
export const useCounter = () => {
  const count = useState('counter', () => 0)

  const increment = () => count.value++
  const decrement = () => count.value--

  return { count, increment, decrement }
}

<!-- Any component -->
<script setup>
const { count, increment } = useCounter()
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

// stores/user.ts
export const useUserStore = defineStore('user', () => {
  const user = ref(null)
  const isLoggedIn = computed(() => !!user.value)

  async function login(credentials) {
    const data = await $fetch('/api/login', {
      method: 'POST',
      body: credentials
    })
    user.value = data.user
  }

  function logout() {
    user.value = null
  }

  return { user, isLoggedIn, login, logout }
})

// Usage
<script setup>
const userStore = useUserStore()
</script>

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const { isLoggedIn } = useAuth()

  if (!isLoggedIn.value) {
    return navigateTo('/login')
  }
})

// pages/dashboard.vue
<script setup>
definePageMeta({
  middleware: 'auth'
})
</script>

// middleware/analytics.global.ts
export default defineNuxtRouteMiddleware((to, from) => {
  // Runs on every route change
  console.log('Navigating to:', to.path)
})

<script setup>
definePageMeta({
  middleware: [
    'auth',
    function (to, from) {
      // Inline middleware logic
      const isAdmin = useState('isAdmin')
      if (!isAdmin.value) {
        return abortNavigation()
      }
    }
  ]
})
</script>

// server/api/users.ts
export default defineEventHandler(async (event) => {
  const users = await prisma.user.findMany()
  return users
})

// Access at: /api/users

// server/api/users/[id].ts
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id')

  const user = await prisma.user.findUnique({
    where: { id: parseInt(id) }
  })

  if (!user) {
    throw createError({
      statusCode: 404,
      message: 'User not found'
    })
  }

  return user
})

// Access at: /api/users/123

// server/api/users.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event)

  const user = await prisma.user.create({
    data: {
      name: body.name,
      email: body.email
    }
  })

  return user
})

// server/middleware/auth.ts
export default defineEventHandler((event) => {
  const token = getHeader(event, 'authorization')

  if (!token) {
    throw createError({
      statusCode: 401,
      message: 'Unauthorized'
    })
  }

  // Verify token...
  event.context.user = decodedUser
})

<script setup>
useHead({
  title: 'My Nuxt App',
  meta: [
    { name: 'description', content: 'My amazing Nuxt application' },
    { property: 'og:title', content: 'My Nuxt App' },
    { property: 'og:image', content: '/og-image.jpg' }
  ],
  link: [
    { rel: 'icon', type: 'image/png', href: '/favicon.png' }
  ]
})
</script>

<script setup>
useSeoMeta({
  title: 'My Nuxt App',
  description: 'My amazing Nuxt application',
  ogTitle: 'My Nuxt App',
  ogDescription: 'My amazing Nuxt application',
  ogImage: 'https://example.com/og-image.jpg',
  twitterCard: 'summary_large_image',
})
</script>

<script setup>
const route = useRoute()
const { data: post } = await useFetch(`/api/posts/${route.params.id}`)

useHead({
  title: () => post.value?.title,
  meta: [
    {
      name: 'description',
      content: () => post.value?.excerpt
    }
  ]
})
</script>

export default defineNuxtConfig({
  app: {
    head: {
      title: 'My Nuxt App',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { name: 'description', content: 'My amazing app' }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ]
    }
  }
})