Cagilo: Blade Components for Laravel

Published on September 14th, 2021 by Paul Redmond

Cagilo is a set of open-source Blade components for the Laravel framework. This package doesn't require a CSS framework or JS resources to function and provides the following components:

Alerts component for working with Laravel session flashing
Device component - ability to hide or show depending on the user's device (user-agent)
Error component - easy way to work with Laravel's error message bag
Icon component - insert inline SVG files
Logout component - component log out users via a POST request
Meta component - set several OG and meta elements used by social media to provide previews of your content

The <x-meta> component seems powerful, with just a few lines, you can generate the following:

<x-meta
    title="Hello World"
    description="Blade components are awesome!"
    image="http://example.com/social.jpg"
/>
 
<!--
Outputs the following:
-->
<title>Hello World</title>
 
<!-- Primary Meta Tags -->
<meta name="title" content="Hello World">
<meta name="description" content="Blade components are awesome!">
 
 
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="http://localhost"/>
<meta property="og:locale" content="en"/>
<meta property="og:title" content="Hello World"/>
<meta property="og:description" content="Blade components are awesome!">
<meta property="og:image" content="http://example.com/social.jpg">
 
<!--  Twitter -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:url" content="http://localhost">
<meta name="twitter:title" content="Hello World">
<meta name="twitter:description" content="Blade components are awesome!">
<meta name="twitter:image" content="http://example.com/social.jpg">

While creating a logout button is straightforward, this package has a convenient component for doing this:

<x-logout/>
 
<!--
Outputs the following:
-->
<form method="POST" action="http://localhost/logout" id="logout">
  <input type="hidden" name="_token" value="...">
</form>
 
<button form="logout" type="submit">
  Log out
</button>

Lastly, the <x-device> component is helpful if you want to conditionally render your template based on a user's user-agent:

<x-device desktop="true">
    <h1>Hello Word</h1>
</x-device>
 
<!-- or multiple devices -->
<x-device phone="true" tablet="true">
    <h1>Hello Word</h1>
</x-device>

The documentation can help you get started and has examples for each blade component. You can learn more about this package, get full installation instructions, and view the source code on GitHub.

This package was submitted to our Laravel News Links section. Links is a place the community can post packages and tutorials around the Laravel ecosystem. Follow along on Twitter @LaravelLinks