Vue Academy · Lesson

The Prop Drilling Problem

Why prop drilling hurts maintainability, what provide/inject solves, when to use it.

The Prop Drilling Problem is a free Vue Academy lesson on CoddyKit — lesson 1 of 4. 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 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is Prop Drilling

Prop drilling is passing data through many layers of components just to reach a deeply nested one. Each intermediate component must accept and forward the prop even if it never uses it.

A Deep Component Tree

Imagine a tree: App -> Layout -> Page -> Section -> Widget. The Widget at the bottom needs the current theme, but only App at the top knows it.

App
  Layout
    Page
      Section
        Widget  <-- needs "theme"

Passing Through App

App holds the theme and passes it to Layout as a prop.

<!-- App.vue -->
<Layout :theme="theme" />

Layout Forwards It

Layout does not use the theme but must declare it and pass it on, just to reach the next level.

<!-- Layout.vue -->
const props = defineProps({ theme: String });
// template:
<Page :theme="props.theme" />

Page Forwards It Too

Page repeats the same boilerplate - declare, then forward - even though it has no interest in the theme.

<!-- Page.vue -->
const props = defineProps({ theme: String });
<Section :theme="props.theme" />

Section Forwards It Again

And again at Section. Every layer adds repetitive plumbing that has nothing to do with that layer responsibility.

<!-- Section.vue -->
const props = defineProps({ theme: String });
<Widget :theme="props.theme" />

Finally the Widget Uses It

Only at the bottom does Widget actually consume the theme. The four layers above were pure pass-through.

<!-- Widget.vue -->
const props = defineProps({ theme: String });
// uses props.theme to style itself

Why This Hurts

Prop drilling causes problems:

Boilerplate in every intermediate component
Refactors break many files when the prop name changes
Intermediate props obscure what each component truly needs
Hard to add new shared values

It Gets Worse with Many Values

Now add user, locale, and permissions. Each must be drilled through all four layers, multiplying the boilerplate.

<Layout
  :theme="theme"
  :user="user"
  :locale="locale"
  :permissions="permissions"
/>

Not Every Shared Value Belongs in Props

Props are great for direct parent-child communication. But for values needed deep in a subtree - theme, current user, i18n - drilling them is the wrong tool. We need a way to provide data to all descendants directly.

Enter Provide / Inject

Vue provide / inject lets an ancestor supply data that any descendant can request directly, skipping every intermediate layer. The next lessons cover providing and injecting.

Quick Check

What best describes prop drilling?

Recap

You saw how prop drilling forces every intermediate component in a deep tree to declare and forward props it does not use, creating boilerplate and brittle refactors. Provide/inject is the cleaner solution for deeply shared values.

Frequently asked questions

Is the “The Prop Drilling Problem” lesson free?

Yes — the full text of “The Prop Drilling Problem” is free to read here on the web, and the Vue Academy course includes 4 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 “The Prop Drilling Problem”?

Why prop drilling hurts maintainability, what provide/inject solves, when to use it. 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 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “The Prop Drilling Problem” 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