Stable in CLI 2.4.0

Nuxt-native SSR with the complete FSD structure

The Nuxt edition keeps Nuxt's official app/ source directory while preserving every Feature-Sliced Design layer. Routing, runtime configuration, modules, and server-state hydration use Nuxt conventions instead of copying the Vue + Vite setup.

Create a Nuxt project

bash

npx create-fsd-architecture@latest my-nuxt-app --framework nuxt

bash

npx create-fsd-architecture@latest my-nuxt-app --framework nuxt --yes

The interactive command lets you choose Axios or native Fetch and enable or disable Vue Query, Pinia, and forms. --yes uses the Nuxt defaults: native $fetch, Vue Query, Pinia, and VeeValidate + Zod.

Default stack

Framework

Nuxt 4 + Vue 3

API client

Nuxt $fetch by default, Axios optional

Server state

TanStack Vue Query with SSR hydration

Client state

Pinia through @pinia/nuxt

Forms

VeeValidate + Zod through @vee-validate/nuxt

Quality

TypeScript, Nuxt ESLint, Steiger, Husky, Commitlint

Nuxt and FSD directory contract

text

app/
├── app/          # Nuxt bootstrap, route wrappers, and global styles
├── pages/        # FSD page slices, not Nuxt route files
├── widgets/      # Large reusable UI blocks
├── features/     # User interactions and business actions
├── entities/     # Business entities and representations
├── shared/       # API, assets, config, utilities, types, and UI
└── plugins/      # Nuxt runtime integrations such as Vue Query

File-based route wrappers live in app/app/routes. They import page slices from app/pages, preventing Nuxt from treating internal FSD files as accidental routes.

Generate slices and routes

bash

npx create-fsd-architecture --generate feature checkout
npx create-fsd-architecture --generate entity product
npx create-fsd-architecture --generate widget navbar
npx create-fsd-architecture --generate page account
npx create-fsd-architecture --generate feature auth

text

app/pages/account/
├── ui/AccountPage.vue
└── index.ts

app/app/routes/account.vue  # exposes /account

Feature, entity, widget, and auth output uses Vue single-file components and the selected Nuxt modules. Page generation also writes the thin file-based route wrapper automatically.

Runtime API config

Generated Fetch and Axios clients read the public API base URL from Nuxt runtime config, so SSR and browser requests use the same project-level contract.

bash

NUXT_PUBLIC_API_BASE=https://api.example.com

Node requirement

Generated Nuxt projects require Node.js 22.22.2 or later. The template pins Node 22.23.0 for local and CI consistency.

Quality commands

bash

npm run fsd:check
npm run lint
npm run typecheck
npm run build
npm run ci

Template source

Inspect the starter, report issues, or contribute in its dedicated repository.

Open FSD-NUXT on GitHub