Nuxt 3 Has a Free API That Makes Full-Stack Vue Development Effortless

#vue #nuxt #webdev #javascript

Nuxt 3 is the full-stack Vue framework with auto-imports, file-based routing, and a powerful server engine. Its API surface is massive.

Auto-Imports: Zero Boilerplate

<script setup>
// No imports needed — Nuxt auto-imports everything!
const count = ref(0);
const doubled = computed(() => count.value * 2);
const { data: products } = await useFetch("/api/products");
const route = useRoute();
const router = useRouter();
const config = useRuntimeConfig();
</script>

useFetch: The Universal Data Hook

<script setup>
// SSR-safe data fetching with caching
const { data, pending, error, refresh } = await useFetch("/api/products", {
  query: { category: "electronics", limit: 20 },
  transform: (data) => data.map(p => ({ ...p, priceFormatted: `$${p.price}` })),
  default: () => [],
  watch: [category], // Re-fetch when category changes
});

// Lazy fetch (client-side only)
const { data: analytics } = useLazyFetch("/api/analytics");
</script>

Server Routes (Nitro-powered)

// server/api/products.get.ts
export default defineEventHandler(async (event) => {
  const { category, limit } = getQuery(event);
  return await db.select().from(products).where(eq(products.category, category)).limit(+limit);
});

// server/api/products.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  return await db.insert(products).values(body).returning();
});

Composables: Shared State

// composables/useProducts.ts
export function useProducts() {
  const products = useState<Product[]>("products", () => []);
  const loading = ref(false);

  async function fetchProducts(category: string) {
    loading.value = true;
    const { data } = await useFetch(`/api/products?category=${category}`);
    products.value = data.value ?? [];
    loading.value = false;
  }

  return { products: readonly(products), loading, fetchProducts };
}

Middleware

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const user = useUser();
  if (!user.value && to.path !== "/login") {
    return navigateTo("/login");
  }
});

// middleware/admin.ts
export default defineNuxtRouteMiddleware(() => {
  const user = useUser();
  if (user.value?.role !== "admin") {
    return abortNavigation({ statusCode: 403 });
  }
});

SEO: useHead + useSeoMeta

<script setup>
useSeoMeta({
  title: () => product.value?.title,
  description: () => product.value?.description,
  ogImage: () => product.value?.image,
  twitterCard: "summary_large_image",
});
</script>