Including sub-views (@include) in Laravel

Introduction

Including sub-views lets you reuse small parts of your page easily. It helps keep your code clean and organized.

You want to show the same header on many pages.

You have a footer that appears on every page.

You want to split a big page into smaller parts for easier editing.

You want to reuse a form or button design in multiple places.

Syntax

Laravel

@include('view.name')

The view name is the path to the Blade file without the .blade.php extension.

You can pass data to the included view using a second argument like @include('view.name', ['key' => 'value']).

Examples

This includes the header.blade.php file at this spot.

Laravel

@include('header')

This includes the partials/footer.blade.php file.

Laravel

@include('partials.footer')

This includes the alert.blade.php file and sends it data to show a success message.

Laravel

@include('alert', ['type' => 'success', 'message' => 'Saved!'])

Sample Program

This example shows a main layout that includes a header and footer sub-view. The header and footer are separate files, so you can reuse them on other pages easily.

Laravel

<!-- resources/views/layout.blade.php -->
<html>
  <body>
    @include('header')
    <main>
      <h1>Welcome to my site</h1>
      <p>Enjoy your stay!</p>
    </main>
    @include('footer')
  </body>
</html>

<!-- resources/views/header.blade.php -->
<header>
  <h2>Site Header</h2>
</header>

<!-- resources/views/footer.blade.php -->
<footer>
  <p>© 2024 My Website</p>
</footer>

Important Notes

Use @include to keep your views DRY (Don't Repeat Yourself).

Passing data to included views helps make them flexible and reusable.

If the included view file is missing, Laravel will throw an error, so check your file paths carefully.

Summary

@include inserts a sub-view inside another view.

It helps reuse common parts like headers and footers.

You can pass data to customize the included sub-view.

Practice

1. What does the @include directive do in a Laravel Blade template?

easy

A. It creates a new database migration file.

B. It defines a new route in the web.php file.

C. It inserts a sub-view inside the current view to reuse code.

D. It compiles all CSS files into one.

Solution

1. Step 1: Understand the purpose of @include

   The @include directive is used in Blade templates to insert one view inside another, allowing code reuse.

2. Step 2: Identify what @include does not do

   It does not define routes, create migrations, or compile CSS files, which are unrelated tasks.

3. Final Answer:

   It inserts a sub-view inside the current view to reuse code. -> Option C

4. Quick Check:

   @include = Insert sub-view [OK]

Hint: Remember: @include inserts reusable view parts [OK]

Common Mistakes:

• Confusing @include with routing or migrations
• Thinking @include compiles assets
• Assuming @include creates new files

2. Which of the following is the correct syntax to include a Blade sub-view named header?

easy

A. @include('header')

B. @include:header

C. @include[header]

D. @include{header}

Solution

1. Step 1: Recall Blade include syntax

   The correct syntax uses parentheses and quotes: @include('viewname').

2. Step 2: Check each option format

   Only @include('header') uses the correct parentheses and quotes. Others use invalid symbols.

3. Final Answer:

   @include('header') -> Option A

4. Quick Check:

   Correct syntax uses parentheses and quotes [OK]

Hint: Use parentheses and quotes with @include [OK]

Common Mistakes:

• Using colons, brackets, or braces instead of parentheses
• Omitting quotes around view name
• Writing @include without parentheses

3. Given the following Blade code:

@include('nav')

and the nav.blade.php contains:

<nav>Menu</nav>

What will be the rendered output inside the main view?

medium

A. <nav>Menu</nav>

B. Menu

C. @include('nav')

D. Error: View not found

Solution

1. Step 1: Understand @include output

   The @include('nav') inserts the entire content of nav.blade.php into the main view.

2. Step 2: Check the content of nav.blade.php

   It contains the HTML <nav>Menu</nav>, so this exact HTML will appear in the output.

3. Final Answer:

   <nav>Menu</nav> -> Option A

4. Quick Check:

   @include inserts full sub-view content [OK]

Hint: Included view content appears exactly where @include is placed [OK]

Common Mistakes:

• Expecting only inner text without tags
• Thinking @include outputs the directive text
• Assuming an error if view exists

4. What is the error in this Blade code snippet?

@include('footer')

Assuming the file footer.blade.php does not exist in the views folder.

medium

A. Warning: Duplicate view inclusion.

B. No error, it renders nothing.

C. Syntax error due to missing semicolon.

D. Runtime error: View [footer] not found.

Solution

1. Step 1: Check if included view file exists

   The @include('footer') tries to load footer.blade.php. If it does not exist, Laravel throws an error.

2. Step 2: Identify the error type

   Laravel reports a runtime error stating the view is not found, not a syntax or warning error.

3. Final Answer:

   Runtime error: View [footer] not found. -> Option D

4. Quick Check:

   Missing view file causes runtime error [OK]

Hint: Ensure included view files exist to avoid runtime errors [OK]

Common Mistakes:

• Assuming no error if file missing
• Confusing syntax errors with missing files
• Expecting warnings instead of errors

5. How can you pass a variable named title with value 'Welcome' to a sub-view header using @include?

hard

A. @include('header')->with('title', 'Welcome')

B. @include('header', ['title' => 'Welcome'])

C. @include('header', title = 'Welcome')

D. @include('header', {title: 'Welcome'})

Solution

1. Step 1: Recall passing data syntax in @include

   To pass data, use an associative array as the second argument: @include('view', ['key' => value]).

2. Step 2: Check each option for correct syntax

   @include('header', ['title' => 'Welcome']) uses the correct array syntax. Options A, C, and D use invalid or unsupported syntax.

3. Final Answer:

   @include('header', ['title' => 'Welcome']) -> Option B

4. Quick Check:

   Pass data as array in second argument [OK]

Hint: Pass variables as array in second argument of @include [OK]

Common Mistakes:

• Using method chaining with @include
• Passing variables without array brackets
• Using object or JS-like syntax