🌟 We are Open Source! Check out our repository on GitHub

Vue.js Project Structure

A scalable and maintainable folder structure for Vue.js applications

File Structure

  • src
    • components
      • ui
        • Button.vue
        • Input.vue
        • Modal.vue
      • layout
        • TheNavbar.vue
        • TheFooter.vue
        • TheSidebar.vue
      • features
        • AuthForm.vue
        • UserProfile.vue
    • views
      • HomeView.vue
      • AboutView.vue
      • DashboardView.vue
    • router
      • index.ts
      • guards.ts
    • stores
      • counter.ts
      • user.ts
      • settings.ts
    • assets
      • styles
      • images
    • composables
      • useAuth.ts
      • useFetch.ts
      • useNotification.ts
    • utils
      • api.ts
      • validation.ts
      • formatting.ts
    • types
      • user.ts
      • api.ts
    • App.vue
    • main.ts
  • tests
    • unit
    • e2e
  • .env
  • .eslintrc.js
  • vite.config.ts
  • package.json
  • README.md

Directory Structure Explanation

src/components/ui/

Contains base UI components that form the foundation of the application's design system.

src/components/layout/

Contains layout components that define the structure and arrangement of pages.

src/components/features/

Contains complex components that implement specific feature requirements.

src/views/

Contains Vue components representing different pages or views in the application.

src/router/

Manages client-side routing and navigation between different views using Vue Router.

src/router/index.ts

Defines application routes, linking views to their corresponding paths in Vue Router.

src/router/guards.ts

Contains Vue Router navigation guards for handling route-level authentication and authorization.

src/stores/

Contains state management logic using Pinia to handle global state across the application.

src/stores/counter.ts

Implements a simple counter store for state management, likely used as an example or demo.

src/stores/user.ts

Manages user-related state, such as authentication status and user profile data.

src/stores/settings.ts

Handles application-wide settings and preferences, such as themes or language selection.

src/assets/

Contains static assets like images and stylesheets used throughout the application.

src/composables/

Contains reusable Vue composition functions (composables) that encapsulate logic for reusability.

src/composables/useAuth.ts

Encapsulates authentication logic, including login, logout, and user session management.

src/composables/useFetch.ts

Provides a reusable function for making API requests with fetch, including error handling.

src/composables/useNotification.ts

Manages notification logic, such as displaying success, error, or warning messages.

src/utils/

Contains utility functions and helper methods used across the application.

src/utils/api.ts

Centralizes API-related functionality, including request handling and response processing.

src/utils/validation.ts

Contains form validation rules and helper functions.

src/utils/formatting.ts

Includes functions for formatting dates, numbers, and other display values.

src/types/

Contains TypeScript type definitions and interfaces used throughout the application.

src/types/user.ts

Defines TypeScript interfaces and types for user-related data structures.

src/types/api.ts

Defines TypeScript interfaces and types for API responses and request payloads.

src/App.vue

The root Vue component that serves as the entry point for the application UI.

src/main.ts

Bootstraps the Vue application, initializes plugins, and mounts the root component.

tests/

Contains all test-related files, including unit and end-to-end tests.

tests/unit/

Contains unit tests for individual components and functions using Vitest or Jest.

tests/e2e/

Contains end-to-end tests using tools like Cypress or Playwright to test the application as a whole.

.env

Environment variables file storing sensitive configuration values such as API keys.