Getting Started with Nuxt 4

Nuxt 4 brings the app/ directory as the default source root, enabling cleaner project organization and better separation between app code and configuration. Here's what you need to know to get started.

The app/ Directory

In Nuxt 4, all your application code lives under app/. This means your components, pages, composables, and plugins are all under one roof — separate from config files like nuxt.config.ts and content.config.ts that live at the project root.

SSR by Default

Nuxt 4 ships with SSR enabled by default, which means better SEO, faster initial paint, and cleaner hydration. If you've been building SPAs with ssr: false, the migration is mostly about ensuring your data fetching uses useAsyncData or useFetch instead of lifecycle hooks.

Content v3 and the New Query API

Nuxt Content v3 introduces a new queryCollection API that replaces queryContent. It's schema-driven via Zod, which means you get full TypeScript inference on your content fields.

const { data: posts } = await useAsyncData('posts', () =>
  queryCollection('blog').order('date', 'DESC').all()
)

The shift toward explicit collection definitions makes large content sites much more maintainable.