How to create reusable web applications using Laravel Components?

How to create reusable web applications using Laravel Components?

Share Now
3 min read
0
(0)
386

In this blog we are going to talk about “How to create reusable web applications using Laravel Components” by Lia Infraservices best Web App Development Company in Chennai

Laravel Components are used to create systems that are both stable and expandable. They enable us to create big applications with reusable, independent, and decoupled components. Laravel Components provides us with a variety of useful tools to assist us in developing dependable web applications while also significantly reducing development time.

 Laravel is made of reusable components that are effectively defined and compiled together to bring up the entire system.

 Create reusable web applications using Laravel Components

All about Laravel Components:

Components are the reusable section or layout which we can use inside a Laravel application. In laravel there are two methods to writing components: 

1. Class-based components and 

2. Anonymous components.

Inside this article, we will see about the complete concept of the  Laravel Components with the help of the following points –

  • Create a Component
  • Files associated with a laravel component
  • Using Component in laravel
  • Passing Data to components

Create a Laravel Component 

To create a class-based component in laravel we use the make:component artisan command. Back to the terminal and type this command to create it.

$ php artisan make: component Message

When we run this, it creates a few files to set up. Let’s see what those files are.

 

Files associated with a laravel component

make: component command creates a view template file as well as a Component class file. View layout file we will find inside /resources/views/components/message.blade.php. Along with this view file, we also have a component class file. The class file we can find inside /app/View/Components/Message.php

Files associated with a laravel component
Files associated with a laravel component - welcome.blade.php

Using Component in laravel 

In the last steps, we have successfully created a component layout and its functional file. Next, we need to use it in the application.

To use a component, we use a “blade component tag” within any template file or layout. Blade component tags start with the string x- followed by the kebab case name of the component class.

# Syntax

<x-{ComponentName}/>

In the above case, we have the component class name as Message. So it is pretty simple.

Example

/resources/views/about-us.blade.php Calling component inside this view file.

<x-message/>

When we have some cases like $ php artisan make: component DisplayMessage. To use this type of component we use.

<x-display-message/>

Passing Data to components

We can pass two types of values. Static value and dynamic value. Let’s see how to pass data.

Passing Data to components
  • “type” is key which contains the value as warning. It has a static value.
  • “:message” is a key which contains dynamic value by means of variable.

Firstly we need to set the data attributes values to variable and then we need to send to layout file. To set these values, back to component class file. Open /app/View/Components/Message.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Message extends Component{

public function __construct($type, $message) {

        $this->type = $type;

        $this->message = $message;

    }

    public function render()

    {

        return view(‘components.message’);

    }

}

Displaying data attributes to layout file

Laravel Components- Displaying data attributes
  • {{ $type }} Blade syntax to print the value of $type sending from it’s class file.
  • {{ $message }} Blade syntax to print the value of $message.

Takeaways:

Laravel components is a sophisticated functionality that was introduced in Laravel 7. A component is a code snippet that can be reused in any blade template. Like Sections, layouts, and inclusions. We use the same header for each template, 

For example; We can make a Header component that we can reuse. In that case , take a sign-up button, one can simply make a component and use the button code and reuse it. 

For more information on Laravel Components. Learn about Laravel – The powerful Web Application Framework Contact Lia Infraservices – Leading Web App Development Company in Chennai.

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Leave comment

Your email address will not be published. Required fields are marked with *.