Quick Introduction to Anonymous Blade Components In Laravel 7
Time to read: 4 minutes
May 28, 2020
Written by
Reviewed by
Laravel 7 introduced not only a new syntax for Laravel Blade components, but some awesome new features that can greatly enhance your development by increasing your productivity. This tutorial will provide a brief overview of the new Anonymous components in Laravel 7, by teaching you how to create dynamic, reusable form fields.
Prerequisites
Before you begin this tutorial, make sure you have the following set up/installed:
- A Laravel 7 application already installed
- General knowledge of Laravel and Blade components
What We’ll Build
We’ll put together a simple, profile-like form, and then extract data from the Blade components. I will be using Tailwind CSS for the styling which for your reference, can be brought in through their CDN. Create a new folder and layout located at resources/views/layouts/main.blade.php. Add the following code to the newly created file:
Now create a route in routes/web.php to point to a view that houses the profile form. Later we will add some data inline to simulate pulling data from a database and sending to our form.
Create the profile.blade.php in the resources/views, and add the following code:
Take a moment and start your Laravel application by running php artisan serve. Navigate to http://127.0.0.1:8000/profile and you should see the following yield:
Anonymous Blade Components
Anonymous components use Laravel’s new <x-*> tags to render dynamic content within a blade. These components differ from inline components in that they provide a mechanism for managing a component via a single file by utilizing a single view file, and have no associated class.” To add, they are super easy to create and use.
We’ll use anonymous blade components to refactor the profile form fields and create elements we can reuse anywhere in the site.
Begin by creating a components directory in the resources/views folder. Then create a subdirectory called inputs. Our first component will be for our text inputs, so create a text.blade.php file here and paste in the following code:
Now in our form markup we can replace all of our text inputs with <x-inputs.text />! However, you’ll notice that our id is hard-coded and this won’t properly support every field defined in the form above.
Props and Attributes
One of the biggest benefits of Laravel’s new anonymous components is their flexibility. Let’s start by adding a property that all of our text inputs should implement. Back in our text component, declare a @props function that takes an array of items that you want to pass into the component. The component now looks like this:
With this addition, dynamic properties such as the id we mentioned early can be passed into the generated form. To pass the property into the form, simply add it as an attribute when declaring the component:
Try replacing the first name field <input id="first_name" class="bg-white border border-gray-200 py-2 px-3 rounded-lg w-full block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5"/> with <x-inputs.text for="first_name"/>
NOTE: There may be times when a property may not be required. all we need to do is add a default value for the property like below:
Maybe we also want to add a name, placeholder, or additional classes to override any defaults. This is where $attributes come in handy. All we have to do is add them when declaring the component as follows:
And in our input:
Replace the content in each respective file as previously shown.
Notice, we did something a little tricky here. We are adding the $attributes directly onto the input and simultaneously allowing ourselves the flexibility to add classes that will be merged with our default classes. We can also use it like so:
Which renders:
Slots
If you notice, our form still contains quite a bit of “bloat”. We are duplicating the label and encapsulating divs several times throughout the form. We can clean that up by making another component to house this markup and use $slot to render our inputs inside.
Start by making a new component in resources/views/components/inputs called group.blade.php and add the following content:
Notice the $slot allows us to add whatever content we want in our component, in the specific place that we are yielding it. Back in our form we can replace the entire divs surrounding our input components like so:
Adjusting for passing in props to replace hard-coded items we end up with:
And our final profile form is now:
Much cleaner!
NOTE: On the div surrounding all of the components I changed the class ‘mt-6- to ‘space-y-6’ which evenly spaces out our elements vertically.
Passing In Default Data
To wrap up, jump back over to web.php and change your function that renders the view to the following. This will simulate retrieving some of the data from your database and passing it to the view:
Obviously, the data is not bound to our input fields. We can handle that by passing a new prop into our inputs with a default value in text.blade.php:
However, when passing this data into our input field we end up with a less than desirable effect:
Thankfully, Laravel provides us with an easy and likely familiar syntax to correct this. If you have used a JavaScript framework like Vue.js in the past, then this next step will feel familiar. Simply add a colon before any prop that should render PHP code:
Add the remaining values as defined in the route to complete testing.
Next Steps
Hopefully, you can see just how easy and flexible the anonymous blade components are with Laravel 7. This was a simple example of how to extract a reusable form input, but you can use these principles for any HTML component your site needs. In fact, recently Taylor Otwell, the creator of Laravel, tweeted an example of a form component that will conditionally allow you to accept file uploads. What components will you add to your projects? Leave some comments below and continue the conversation!
Shane D. Rosenthal is an AWS Certified and experienced full-stack developer that has worked with Laravel since 2013. He is open for consultation regarding Laravel and VueJS applications and AWS architecture and can be reached via:
- Email: srosenthal82@gmail.com
- Twitter: @ShaneDRosenthal
Related Resources
Twilio Docs
From APIs to SDKs to sample apps
API reference documentation, SDKs, helper libraries, quickstarts, and tutorials for your language and platform.
Resource Center
The latest ebooks, industry reports, and webinars
Learn from customer engagement experts to improve your own communication.
Ahoy
Twilio's developer community hub
Best practices, code samples, and inspiration to build communications and digital engagement experiences.