Vue Nested Routes

Nested Views

Nested routes render child routes inside a parent's RouterView.

Perfect for layouts with sidebars and tabs.

{ path: '/settings', component: SettingsLayout, children: [
  { path: '', component: Profile },
  { path: 'billing', component: Billing },
]}

Settings layout with default + billing child.

Empty Path Child

path: '' is the default child.

• Prefer Composition API + script setup.
• Use computed for derived UI.
• Keep side effects intentional.
• Practice in a small Vite app.

Vue Nested Routes Cheatsheet

Quick reference for patterns covered in this lesson.

Layouts

One parent layout reduces chrome duplication.

Common Mistakes

• Forgetting nested RouterView.
• Absolute child paths accidentally escaping layout.

Key Takeaways

• Vue Nested Routes is important in Vue apps.
• Practice in SFCs.
• Prefer clear naming.
• Check Vue docs for details.