Nuxt App Folder Structure Documentation #

Root Files #

  • app.vue: Root Vue component for the application.
  • package.json / pnpm-lock.yaml: Project metadata and lockfile for dependencies.
  • nuxt.config.ts: Main configuration file for Nuxt.
  • tailwind.config.js: Tailwind CSS configuration.
  • README.md: Overview and setup instructions for the app.
  • Dockerfile / Dockerfile.dev: Docker configurations for production and development.
  • .gitignore / .dockerignore: Environment ignore files.
  • spa-loading-template.html: HTML fallback for SPA loading screen.

Folders #

middleware/ #

Global or route-specific middleware, such as authentication logic.

types/ #

TypeScript interfaces and type definitions for the application.

stores/ #

Pinia stores for managing global state like member info and Yoto icons.

utils/ #

Utility functions used throughout the app (e.g., validation logic).

schemas/ #

Zod schemas or similar used for validation of forms or API data.

components/ #

Vue components organized ui (which are ShadCN-vue components like buttons, alerts and dialogs), ux which contains reusable but app-specific components (e.g. loading indicator, alert message component) and feature-specific components (e.g. member forms/sheets etc)

layouts/ #

Nuxt layout components, such as the default app shell.

pages/ #

Vue files that define the route structure for the app (e.g., login, home).

public/ #

Static assets publicly served by the app, including images and fonts.

assets/ #

Compiled or processed styling assets like Tailwind CSS.

lib/ #

This contains the utils.ts file which is auto-generated by ShadCN-Vue

api/ #

Composable functions that interact with backend APIs (e.g., for Yoto or members).

errors/ #

Custom error classes, such as ApiError.ts.

.nuxt/ #

Generated Nuxt files including types, manifests, and build outputs.

.output/ #

Build output from Nuxt, ready for deployment.

server/ #

Contains server-specific configuration files such as TypeScript configs. This is not used in this project.