DEV Community

Alex Spinov
Alex Spinov

Posted on

Nuxt 3 Has a Free Full-Stack Vue Framework with Auto-Imports and Server Routes

#webdev #javascript #nuxt #vue

Nuxt 3 auto-imports components, composables, and utilities. Server routes, hybrid rendering, and 50+ modules — zero configuration required.

What Makes Nuxt 3 Special

Next.js dominates React. Nuxt dominates Vue. But Nuxt 3 has features that Next.js still doesn't.

What You Get for Free

Auto-imports everywhere:

<script setup>
// No imports needed — Nuxt auto-imports ref, computed, useFetch, etc.
const count = ref(0);
const { data } = await useFetch('/api/users');
</script>
Enter fullscreen mode Exit fullscreen mode

Components in components/ are auto-imported. Composables in composables/ are auto-imported. Utilities in utils/ are auto-imported.

Server routes (API endpoints):

// server/api/users.get.ts
export default defineEventHandler(async () => {
  return await db.user.findMany();
});

// server/api/users.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  return await db.user.create({ data: body });
});
Enter fullscreen mode Exit fullscreen mode

File-based API routes. GET, POST, PUT, DELETE from file names. No Express needed.

Hybrid rendering — per-route control:

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },           // Static at build time
    '/dashboard/**': { ssr: false },     // Client-side only
    '/blog/**': { isr: 3600 },          // Regenerate every hour
    '/api/**': { cors: true },           // API routes
  }
});
Enter fullscreen mode Exit fullscreen mode

Nitro server engine — deploy to Node.js, Cloudflare Workers, Vercel, Netlify, Deno with zero config changes

Quick Start 

npx nuxi init my-app
cd my-app
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Module Ecosystem

50+ official and community modules:

  • @nuxtjs/tailwindcss — Tailwind CSS integration
  • @nuxt/content — Git-based CMS for Markdown/YAML/JSON
  • @nuxt/image — automatic image optimization
  • @sidebase/nuxt-auth — authentication
  • nuxt-icon — 100K+ icons

Install: npx nuxi module add tailwindcss. Done.

If you use Vue — Nuxt 3 is the most productive full-stack framework available.

Need web scraping or data extraction? Check out my tools on Apify — get structured data from any website in minutes.

Custom solution? Email spinov001@gmail.com — quote in 2 hours.

Top comments (0)