Folders That Survive Growth

Every new Vue project starts with src/components and src/views. That arrangement holds for ten files. At a hundred, one change touches four folders, and no folder tells you what the application does.

Group by feature

Put everything a feature needs in one folder: its components, its composables, its API calls, its types. A composable is a reusable function that uses Vue's reactivity, covered in Stage 2. So src/features/invoices/ holds components/, composables/, api.ts and types.ts. Removing the feature becomes removing the folder.

Where shared code goes

Code that two or more features use moves to src/shared/. The views the router mounts stay in src/views/, because routing is the one concern that is application-wide. Keep a view thin: it composes feature components and little else.

The import tangle

Deep folders produce imports like ../../../shared/components/StatusBadge.vue. Projects created with npm create vue@latest ship an alias for exactly this: @/ means src/. These two are the same file:

• import StatusBadge from '../../../shared/components/StatusBadge.vue'
• import StatusBadge from '@/shared/components/StatusBadge.vue'

The alias form survives a file move; the relative form does not. One rule keeps the graph honest: a feature may import from shared, never from another feature. When two features need the same thing, that thing belongs in shared. The component below sits inside a feature folder and reaches shared code through the alias.

<script setup lang="ts">
import { computed } from 'vue'
import StatusBadge from '@/shared/components/StatusBadge.vue'
import { useInvoiceTotals } from '@/features/invoices/composables/useInvoiceTotals'
import type { Invoice } from '@/features/invoices/types'

const props = defineProps<{ invoices: Invoice[] }>()

const { formattedTotal } = useInvoiceTotals(computed(() => props.invoices))
</script>

<template>
  <ul>
    <li v-for="invoice in props.invoices" :key="invoice.id">
      <strong>{{ invoice.number }}</strong>
      <status-badge :status="invoice.status" />
    </li>
  </ul>
  <p>Total outstanding: {{ formattedTotal }}</p>
</template>

<style scoped>
ul {
  list-style: none;
  padding: 0;
}
</style>

// vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

// tsconfig.app.json
{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

src/
  api/
    client.ts
  features/
    invoices/
      components/InvoiceList.vue
      composables/useInvoiceTotals.ts
      api.ts
      types.ts
    settings/
      components/ProfileForm.vue
      api.ts
  shared/
    components/StatusBadge.vue
    composables/useClipboard.ts
  views/
    InvoicesView.vue
    SettingsView.vue
  router/index.ts
  stores/auth.ts
  App.vue
  main.ts