Nuxt 3 Application Patterns

# Nuxt 3 Application Patterns for Google Antigravity

Master modern Vue 3 application development with Nuxt 3 and Google Antigravity IDE. This comprehensive guide covers auto-imports, composables, server routes, middleware patterns, and the Nitro server engine that powers Nuxt 3 universal rendering capabilities.

## Configuration

Configure your Antigravity environment for Nuxt 3:

```typescript
// .antigravity/nuxt.ts
export const nuxtConfig = {
  version: "3.x",
  features: {
    autoImports: true,
    composables: true,
    serverRoutes: true,
    hybridRendering: true
  },
  patterns: ["useFetch", "useAsyncData", "useState", "middleware"]
};
```

## Auto-Import Composables

Create reusable composables with auto-import:

```typescript
// composables/useCounter.ts
export function useCounter(initial = 0) {
  const count = ref(initial);
  
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => count.value = initial;
  
  return {
    count: readonly(count),
    increment,
    decrement,
    reset
  };
}

// composables/useApi.ts
export function useApi<T>(url: string) {
  const data = ref<T | null>(null);
  const error = ref<Error | null>(null);
  const loading = ref(false);

  const execute = async () => {
    loading.value = true;
    error.value = null;
    
    try {
      data.value = await $fetch<T>(url);
    } catch (e) {
      error.value = e as Error;
    } finally {
      loading.value = false;
    }
  };

  return { data, error, loading, execute };
}
```

## Server Routes Pattern

Build API endpoints with Nitro:

```typescript
// server/api/users/index.get.ts
export default defineEventHandler(async (event) => {
  const query = getQuery(event);
  const { page = 1, limit = 10 } = query;
  
  const users = await prisma.user.findMany({
    skip: (Number(page) - 1) * Number(limit),
    take: Number(limit),
    select: {
      id: true,
      name: true,
      email: true,
      createdAt: true
    }
  });
  
  return users;
});

// server/api/users/index.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  
  const validated = userSchema.parse(body);
  
  const user = await prisma.user.create({
    data: validated
  });
  
  setResponseStatus(event, 201);
  return user;
});

// server/api/users/[id].get.ts
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, "id");
  
  const user = await prisma.user.findUnique({
    where: { id }
  });
  
  if (!user) {
    throw createError({
      statusCode: 404,
      message: "User not found"
    });
  }
  
  return user;
});
```

## Data Fetching Patterns

Handle data fetching with built-in composables:

```vue
<script setup lang="ts">
const { data: posts, pending, error, refresh } = await useFetch("/api/posts", {
  key: "posts",
  lazy: true,
  default: () => [],
  transform: (data) => data.map(post => ({
    ...post,
    createdAt: new Date(post.createdAt)
  })),
  watch: [() => route.query.page]
});

const { data: user } = await useAsyncData(
  "user",
  () => $fetch(`/api/users/${route.params.id}`),
  {
    pick: ["name", "email", "avatar"]
  }
);
</script>
```

## Middleware Patterns

Implement route guards and transformations:

```typescript
// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const user = useSupabaseUser();
  
  if (!user.value) {
    return navigateTo("/login", {
      redirectCode: 302
    });
  }
});

// middleware/admin.ts
export default defineNuxtRouteMiddleware(async (to) => {
  const { data: user } = await useFetch("/api/me");
  
  if (user.value?.role !== "admin") {
    throw createError({
      statusCode: 403,
      message: "Access denied"
    });
  }
});
```

## State Management

Use useState for shared state:

```typescript
// composables/useAuth.ts
export function useAuth() {
  const user = useState<User | null>("user", () => null);
  const isAuthenticated = computed(() => !!user.value);

  const login = async (credentials: LoginCredentials) => {
    const response = await $fetch("/api/auth/login", {
      method: "POST",
      body: credentials
    });
    user.value = response.user;
  };

  const logout = async () => {
    await $fetch("/api/auth/logout", { method: "POST" });
    user.value = null;
    navigateTo("/login");
  };

  return { user, isAuthenticated, login, logout };
}
```

## Best Practices

Follow these guidelines for Nuxt 3 development:

1. **Use auto-imports** - Leverage Nuxt automatic imports
2. **Organize composables** - Keep composables focused and reusable
3. **Type server routes** - Add proper TypeScript types
4. **Handle loading states** - Show appropriate UI feedback
5. **Implement error boundaries** - Catch and display errors gracefully
6. **Use hybrid rendering** - Optimize per-route rendering strategy

Google Antigravity IDE provides intelligent Nuxt scaffolding and auto-complete for Vue 3 Composition API patterns.