Vue Academy · Lesson

Scalable Folder Structure

Organize large Vue projects for maintainability.

Scalable Folder Structure is a free Vue Academy lesson on CoddyKit — lesson 3 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Structure Matters

As a Vue app grows past a handful of files, how you organize it determines how easy it is to navigate, maintain, and onboard new developers. A good structure scales; a chaotic one slows everyone down.

Type-Based Organization

The type-based approach groups files by what they are: all components together, all views together, all stores together. It is simple and works well for small to medium apps.

src/
  components/
  views/
  stores/
  composables/
  router/

Feature-Based Organization

The feature-based approach groups files by the feature they belong to. Everything for the auth feature lives in one folder, making large apps easier to reason about.

src/
  features/
    auth/
      LoginView.vue
      useAuth.js
      authStore.js
    cart/
      CartView.vue
      cartStore.js

Choosing an Approach

Type-based is great for smaller apps. As an app grows and features multiply, feature-based keeps related code together and reduces cross-folder jumping. Many teams start type-based and migrate as they scale.

Separating Views and Components

Distinguish views (page-level, routed components) from components (reusable building blocks). This separation clarifies which pieces are routable and which are shared.

views/      // routed pages: HomeView.vue, AboutView.vue
components/ // reusable: BaseButton.vue, UserCard.vue

Organizing Composables

Keep reusable Composition API logic in a composables folder. Naming them with a use prefix signals their purpose at a glance.

composables/
  useAuth.js
  useFetch.js
  useLocalStorage.js

Organizing Stores

Place global state stores in a stores folder, one file per domain. This keeps state management discoverable and modular.

stores/
  user.js
  cart.js
  settings.js

Naming Conventions

Consistency reduces friction. Use PascalCase for component files, prefix base components with Base, and use multi-word names to avoid clashing with HTML elements.

// components
BaseButton.vue
BaseInput.vue
UserProfileCard.vue

// composables
useAuth.js

Barrel Exports

A barrel is an index.js that re-exports a folder contents, so consumers import from one path instead of many.

// composables/index.js
export { useAuth } from "./useAuth"
export { useFetch } from "./useFetch"

Importing from a Barrel

With a barrel, multiple imports collapse into a single tidy line, improving readability.

import { useAuth, useFetch } from "@/composables"

Keeping It Consistent

Whatever structure you pick, apply it consistently and document it in the project README. The best structure is one the whole team understands and follows. Refactor toward features as the app grows.

Quick Check

Test your knowledge of folder structure.

Recap

Organize by type for smaller apps and by feature as you scale. Separate routed views from reusable components, keep composables and stores in their own folders, follow consistent naming, and use barrel exports for clean imports. Consistency, documented for the team, is what truly makes a structure scalable.

Frequently asked questions

Is the “Scalable Folder Structure” lesson free?

Yes — the full text of “Scalable Folder Structure” is free to read here on the web, and the Vue Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Scalable Folder Structure”?

Organize large Vue projects for maintainability. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Scalable Folder Structure” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy