🌟 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
      • HelloWorld.vue
      • TheNavbar.vue
      • TheFooter.vue
    • views
      • HomeView.vue
      • AboutView.vue
      • DashboardView.vue
    • router
      • index.ts
    • stores
      • counter.ts
      • user.ts
    • assets
      • main.css
      • logo.svg
    • composables
      • useAuth.ts
      • useFetch.ts
    • App.vue
    • main.ts
  • index.html
  • vite.config.ts
  • package.json
  • README.md

Directory Structure Explanation

src/

The main source directory containing all Vue.js application code and assets.

src/components/

Contains reusable Vue components that can be imported and used across the application. Following Vue.js best practices, component files use PascalCase names.

src/components/HelloWorld.vue

A sample component demonstrating Vue.js component structure with template, script, and style sections.

src/components/TheNavbar.vue

The main navigation component. The 'The' prefix indicates it's a single-instance component used at the app root level.

src/views/

Contains Vue components that serve as pages or views, typically corresponding to different routes in the application.

src/views/HomeView.vue

The home page component, typically rendered at the root route (/).

src/router/

Contains Vue Router configuration for handling client-side routing in the application.

src/router/index.ts

Defines route configurations, including path mappings to view components and navigation guards.

src/stores/

Contains Pinia/Vuex stores for state management across the application.

src/stores/counter.ts

A Pinia/Vuex store module handling counter-related state and actions.

src/stores/user.ts

A Pinia/Vuex store module managing user-related state, including authentication and user data.

src/composables/

Contains Vue 3 Composition API composables (hooks) that encapsulate and reuse stateful logic across components.

src/composables/useAuth.ts

A composable for handling authentication-related logic and state.

src/composables/useFetch.ts

A composable for making HTTP requests with built-in loading and error states.