Project structure · Frontend
Nuxt project structure
Opens with creditsFor developers who know some Vue and want a full app with server rendering, file-based routing and API routes in one project. The example is a campus events app with sign-in and seat booking: Vue code lives in app/, the API and database in server/, code both sides need in shared/, and a large area like the admin dashboard can later move into its own layer.
Curated by Tauseef FayyazIntermediate172 files and foldersNuxt 4.6, Vue 3.5, Nitro 2.13Checked October 2026How it grows
Each stage opens the explorer there
- 1Day 1What the scaffold and your first hour give you22 files and folders
- 2GrowingWhat a real app with features and tests adds+83 files and folders
- ProductionWhat running it for real users adds+30 files and foldersOpens with credits
- ExpertWhat a team needs to keep it healthy for years+37 files and foldersOpens with credits
How it is organised
- Vue code lives in app/, server code in server/, and code both need in shared/. Nothing in shared/ may import Vue or Nitro.
- Lean on the conventions: pages/ is your URL map, components/ and composables/ are auto-imported, and file names like `.get.ts`, `.client.vue` and `.global.ts` change behaviour, so name files on purpose.
- Load page data with useFetch or useAsyncData so it is fetched once on the server and reused in the browser; use $fetch for actions such as clicks and form submits.
- Route middleware and hidden buttons only shape the UI. Every server route checks the session, the role and the input itself.
- Secrets go in runtimeConfig and come from NUXT_ environment variables at runtime. Only what is under runtimeConfig.public reaches the browser, and app.config is always public.
- Group components by product area (components/event, components/account). When one area gets its own team and grows large, move it into layers/ with its own owners.
- Keep the state small: useFetch caches server data and useState shares simple values. Add Pinia only for client state with real actions.
At the top of the project
Open one in the explorer for the full story
- my-app/
- .husky/Git hooks managed by husky, created by `npx husky init`.2 inside
- .data/Local data written by Nitro storage and Nuxt Content in development.
- .nuxt/Generated types, tsconfig files and the virtual app Nuxt builds in development.
- .output/The production build from `nuxt build`: a public folder and a Nitro server.
- .vscode/Shared VS Code settings and recommended extensions.2 inside
- app/Your Vue application: pages, components, layouts, composables and plugins.12 inside
- content/Markdown files read by Nuxt Content: news posts and static pages.1 inside
- coverage/Coverage reports from `vitest run --coverage`.
- i18n/Translations for @nuxtjs/i18n.1 inside
- node_modules/Installed packages.
- public/Files served as they are, from the site root.2 inside
- server/The Nitro server: API routes, server middleware, plugins and server-only utilities.4 inside
- shared/Code used by both the Vue app and the server.2 inside
- test/Vitest tests: plain unit tests and tests that run inside a Nuxt environment.2 inside
- .editorconfigIndentation, line endings and final newline for every editor.
- .envYour local secrets and settings: database URL, session password, OAuth keys.
- .env.exampleEvery variable the app needs, with fake values and a comment each.
- .gitignoreIgnores .nuxt, .output, .data, .nitro, .cache, dist, node_modules, logs and .env files.
- .nvmrcThe Node version for this project, for example 24.
- commitlint.config.tsEnforces Conventional Commit messages such as `feat(events): add filters`.
- compose.yamlStarts Postgres for local development with `docker compose up -d`.
- content.config.tsDefines Nuxt Content collections and their frontmatter schemas.
- drizzle.config.tsTells drizzle-kit where the schema is, where migrations go and how to connect.
- eslint.config.mjsESLint flat config built from the project's Nuxt setup by @nuxt/eslint.
- nuxt.config.tsThe main config: modules, runtime config, route rules, CSS and app head.
- package-lock.jsonThe exact version of every installed package.
- package.jsonScripts (dev, build, generate, preview), dependencies and the postinstall that runs nuxt prepare.
- README.mdHow to install, run, build and preview the project.
- tsconfig.jsonPoints TypeScript at the four generated configs in .nuxt (app, server, shared, node).
- vitest.config.tsTwo Vitest projects: `unit` in Node and `nuxt` in the Nuxt environment.
Learn more on Sefism
Roadmaps, cheat sheets and projects that go with Nuxt.
- Roadmap· VueFrontend development roadmapHTML, CSS, JavaScript and a framework
- RoadmapFull stack development roadmapBuild and ship whole web apps
- Roadmap· PlaywrightQA and test automation roadmapManual testing to automated suites
- Roadmap· TypeScriptSoftware design and clean code roadmapOOP, SOLID, design patterns, refactoring
- Cheat sheetFrontend development cheat sheetHTML, CSS, JavaScript and a framework.
- Cheat sheetFull stack development cheat sheetBuild and ship whole web apps.
- Cheat sheetQA and test automation cheat sheetManual testing to automated suites.
- FYP idea· BeginnerMasters Application and Scholarship Deadline PlannerA web app for students applying to masters programmes and scholarships abroad: add each application with its deadline, time zone, fees and documents, and the app works backwards to a week-by-week plan, flags clashes and tracks referees. A beginner final year project with real users in every graduating class.
- FYP idea· BeginnerRent Ledger and Tenant Portal for Small LandlordsA web app for small landlords and property caretakers with a few houses, flats or shops to track agreements, monthly rent with yearly increments, utility bills, security deposits and repair requests, with a simple tenant portal. A beginner-friendly final year project in real estate and property management.
See 11 moreShow fewer
- FYP idea· IntermediateApproval Workflow Engine with Escalations for Small OfficesAn approval workflow engine for small offices, schools and NGOs that turns purchase requests, leave, reimbursements and document sign-offs into tracked flows with deadlines, escalations and email or WhatsApp-style reminders. A no-code automation final year project with a durable workflow runtime and an audit trail.
- QuestionWhat should I learn to become a web developer, and in what order?Learn the web platform first (HTML, CSS, JavaScript, how HTTP works), then one frontend framework, then a backend with a database, and build a real project at each stage. If you already know WordPress, you are not starting over: your HTML, CSS and PHP experience transfers.
- QuestionI understand tutorials but cannot build anything myself. Why does coding feel so different when I am alone?Tutorials train recognition, not production. When you follow along, someone else makes every decision. Building alone requires you to break a problem down and make choices, which is a separate skill. Build it with small projects, planning on paper first, and a rule to struggle before you look anything up.
- QuestionHow do I build a developer portfolio as a beginner with nothing to show?Start with two or three small but complete projects that solve a real problem, each with a clear README, screenshots and a live link or easy run steps. Put them on a simple one-page site or a tidy GitHub profile. Depth and finish matter far more than the number of projects or a fancy design.
- QuestionShould I learn TypeScript or Python first in 2026?Learn Python first if you are new to programming or drawn to data and AI. Learn TypeScript first only if you already know some JavaScript or are certain about web development, and even then learn plain JavaScript for a few weeks before the types. The second language is much easier than the first.
- Resource· GuideNuxt DocumentationThe official documentation for Nuxt, the full-stack framework built on Vue, now covering Nuxt 4. It explains file-based routing, auto-imports, rendering modes (server-side, static and hybrid), data fetching, server routes powered by Nitro, modules and deployment to many hosts. It suits Vue developers who need SEO-friendly pages, server logic in the same project, or a structured way to build a larger Vue application.
- Resource· GuideVue.js GuideThe official Vue.js guide covers the framework from the first component to scaling up: reactivity, templates, components, props and events, slots, composables, built-in components, routing, state management, testing, TypeScript and server-side rendering. Every page can switch between the Options API and the Composition API, and there is an interactive tutorial. It is clear enough to learn Vue from directly, and suits anyone with basic HTML, CSS and JavaScript who wants to build interactive interfaces.
- Resource· GuideThe TypeScript HandbookThe TypeScript Handbook is the official, free guide to TypeScript's type system from the TypeScript team, written for working programmers and kept current with each release. It covers everyday types, narrowing, functions, object types, generics, type manipulation, classes and modules, and it is designed to be read in a few hours. It suits JavaScript developers adopting TypeScript and anyone who writes types by copying patterns without understanding them.
- Resource· GuideVitest DocumentationThe official documentation for Vitest, the test runner built on Vite. Its getting started guide has you writing and running a real test in minutes, then covers matchers, async tests, setup and teardown, mocking (functions, modules, timers, dates, requests), snapshots, coverage, the UI dashboard and browser mode for component tests. It uses a Jest-compatible API, so it suits JavaScript and TypeScript developers starting to test, and teams moving from Jest.
- Resource· GuidePlaywright DocumentationThe official documentation for Playwright, Microsoft's open-source framework for end-to-end testing in real Chromium, Firefox and WebKit browsers, with mobile emulation. It walks you from installation to your first test, then covers locators, assertions, fixtures, authentication, API testing, parallel runs and CI. Tools such as the code generator, UI mode and trace viewer make first tests easy. It suits developers and QA engineers adding reliable browser tests to a web app.
- Resource· GuideZod DocumentationThe official docs for Zod 4, the TypeScript-first schema library: declare a schema once, get a runtime validator and a static type, and convert it to JSON Schema. The OpenAI Agents SDK, the Claude Agent SDK and the MCP TypeScript SDK all accept Zod schemas for tools.
Checked against 21 official sources, October 2026. If something has changed, the docs win.Show sourcesHide sources
- Nuxt: Installation (create-nuxt)
- Nuxt: Directory structure
- Nuxt: Auto-imports
- Nuxt: components directory
- Nuxt: Data fetching
- Nuxt: Runtime config
- Nuxt: server directory
- Nuxt: shared directory
- Nuxt: Layers
- Nuxt: Testing
- Nuxt: Deployment
- Nuxt starter template (v4 branch)
- Nuxt CLI and create-nuxt source
- Nuxt test utils
- Nuxt ESLint module
- Nuxt Content: collections
- Nuxt i18n
- nuxt-auth-utils
- Nitro: Tasks
- Drizzle ORM: PostgreSQL
- Sentry: Nuxt SDK
Best practices and checklists for this stack
Picked from the other libraries by shared topics.
Best practices
See all- React Best PracticesModern React best practices for 2026: pure components, lean state, fewer effects, React Compiler, form actions, accessibility and testing.
- TypeScript Best PracticesModern TypeScript best practices for 2026: strict settings, TypeScript 7, modeling data with unions, safe narrowing, runtime validation, generics and typed linting.
- Modern CSS Best PracticesModern CSS best practices: cascade layers, low specificity, custom properties, Grid and Flexbox layout, responsive design, container queries, :has() and nesting, plus Tailwind CSS v4 tips.
Checklists
See all- Web Accessibility ChecklistA practical web accessibility checklist built on WCAG 2.2 level AA, with a severity and a concrete way to verify every check.
- Web Performance ChecklistA practical web performance checklist built on Core Web Vitals: LCP, INP and CLS, with a severity and a concrete way to verify every check.
Work with me
Stuck on something specific?
Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.
- 1:1 Mentorship
- Fresh Graduate Mentorship
- Career Guidance
Brand deals, promos and partnerships: tauseeffayyaz@gmail.com