Project structure · Frontend
Vue 3 with Vite project structure
Opens with creditsFor developers building a Vue single-page app with TypeScript, Vue Router and Pinia, the stack create-vue sets up. The example is an orders dashboard with sign-in: the scaffold folders stay for app-wide pieces (plugins, layouts, base components, router), and each product area lives in a feature folder with its own views, components, store, API calls and tests.
Curated by Tauseef FayyazBeginner210 files and foldersVue 3.5, Vite 8, TypeScript 6Checked October 2026How it grows
Each stage opens the explorer there
- 1Day 1What the scaffold and your first hour give you46 files and folders
- 2GrowingWhat a real app with features and tests adds+89 files and folders
- ProductionWhat running it for real users adds+31 files and foldersOpens with credits
- ExpertWhat a team needs to keep it healthy for years+44 files and foldersOpens with credits
How it is organised
- Keep the scaffold folders (components, router, stores, views) for app-wide pieces, and put each product area in src/features/<name> with its own views, components, store, API calls and tests.
- Features never import from each other. Shared UI goes to src/components/base, shared logic to src/composables, configured clients to src/lib, and app wiring (plugins, router, layouts) stays at the top of src.
- Use <script setup lang="ts"> and the Composition API everywhere. Reusable stateful logic becomes a composable (useSomething), not a mixin.
- Pinia holds state that several components share; local state stays in the component with ref and computed. Destructure store state with storeToRefs.
- Component names are multi-word PascalCase (OrdersTable.vue), and base components start with Base (BaseButton.vue), as the Vue style guide recommends.
- Every route except the home page is lazy loaded, so each feature becomes its own chunk, and route guards only shape the UI: the backend checks every request.
- Everything in the bundle is public. VITE_ variables are baked in at build time, so secrets never go in them.
- Playwright over Cypress for e2e: create-vue offers both; Playwright runs Chromium, Firefox and WebKit in parallel and its generated config already tests the preview build in CI. Pick Cypress if your team wants its interactive runner and in-browser component tests.
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
- .vscode/Shared VS Code settings and recommended extensions.3 inside
- coverage/Coverage reports written by vitest run --coverage.
- dist/Production build output from vite build.
- e2e/Playwright end-to-end tests, with their own tsconfig.3 inside
- node_modules/Installed packages, created by npm install.
- public/Files copied as-is to the site root.2 inside
- src/All application code: plugins, router, layouts, features and shared pieces.15 inside
- .editorconfigIndentation, charset, line endings and a 100-character line length for editors.
- .env.exampleLists the VITE_ variables the app needs, with placeholder values. Committed.
- .env.localYour local settings, such as the dev API URL. Ignored by the *.local rule.
- .gitattributesNormalises line endings to LF for text files.
- .gitignoreIgnores node_modules, dist, coverage, *.local, .vscode except extensions.json, and Playwright output.
- .lintstagedrc.jsonWhich commands lint-staged runs on staged files: Oxlint, ESLint fix, Prettier.
- .nvmrcPins the Node.js version for nvm, fnm and CI.
- .oxlintrc.jsonOxlint config. create-vue always adds Oxlint next to ESLint.
- .prettierrc.jsonPrettier settings: no semicolons, single quotes, 100-character lines.
- AGENTS.mdInstructions for AI coding agents: layout, conventions and commands.
- CLAUDE.mdOne line, @AGENTS.md, so Claude Code reads the same rules.
- README.mdGenerated setup notes listing the scripts for your chosen features.
- commitlint.config.tsEnforces Conventional Commits (feat:, fix:, chore:) via the commit-msg hook.
- compose.yamlStarts the backend API and its database locally with docker compose up.
- env.d.tsLoads Vite client types so import.meta.env and asset imports are typed.
- eslint.config.tsESLint flat config with Vue, TypeScript, Vitest, Playwright and Oxlint rules.
- index.htmlThe single HTML page with the #app element. Vite uses it as the entry.
- package-lock.jsonExact versions of every package, written by npm install.
- package.jsonDependencies and scripts: dev, build, preview, test:unit, test:e2e, type-check, lint, format.
- playwright.config.tsPlaywright settings: e2e folder, three browsers, base URL and the server to start.
- tsconfig.app.jsonTypeScript settings for src, with the @/* alias and noUncheckedIndexedAccess.
- tsconfig.jsonThe root config that only references the node, app and vitest configs.
- tsconfig.node.jsonTypeScript settings for config files that run in Node: vite, vitest, playwright, eslint.
- tsconfig.vitest.jsonTypeScript settings for unit tests, with jsdom and Node types.
- vite.config.tsVite config: the Vue plugin, Vue DevTools plugin and the @ alias to src.
- vitest.config.tsVitest config merged from vite.config.ts, using jsdom and skipping the e2e folder.
Learn more on Sefism
Roadmaps, cheat sheets and projects that go with Vue 3 with Vite.
- Roadmap· VueFrontend development roadmapHTML, CSS, JavaScript and a framework
- 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 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.
- 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.
See 8 moreShow fewer
- 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· 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· GuideVite GuideThe official guide to Vite, the dev server and build tool behind most new React, Vue, Svelte and other frontend projects. It explains scaffolding a project, the fast dev server and hot module replacement, static assets, environment variables and modes, plugins, the dev server proxy, production builds, deployment, server-side rendering and backend integration. It suits frontend developers who want env files, asset handling and builds to stop being a mystery when something breaks.
- 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.
Checked against 20 official sources, October 2026. If something has changed, the docs win.Show sourcesHide sources
- Vue: Quick start (create-vue)
- Vue: Style guide
- Vue: Composables
- Vue: Testing
- Vue: Security
- Vue: Application API (app.config.errorHandler)
- Vue Router: Lazy loading routes
- Vue Router: Navigation guards
- Vue Router: Route meta fields
- Pinia: Defining a store
- Pinia: Testing stores
- Vue I18n: Composition API
- Vue Test Utils: Guide
- Vite guide: Env variables and modes
- Vite guide: Deploying a static site
- Mock Service Worker: Node.js integration
- Playwright: Authentication
- Playwright: Accessibility testing
- Sentry: Vue SDK
- create-vue source and templates
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.
- 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.
- TypeScript Best PracticesModern TypeScript best practices for 2026: strict settings, TypeScript 7, modeling data with unions, safe narrowing, runtime validation, generics and typed linting.
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