• Reading time ~ 2 min
  • 10.09.2022

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:

    title="Hello World"
    description="Blade components are awesome!"
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:

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

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>
<!-- or multiple devices -->
<x-device phone="true" tablet="true">
    <h1>Hello Word</h1>

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


No comments yet
Yurij Finiv

Yurij Finiv

Full stack


Professional Fullstack developer with experience in website development and desktop development. I have experience with various tools and technologies such as Bootstrap, Tailwind, HTML5, CSS3, PUG, JS, AlpineJs, jQuery, PHP, MODX, Laravel, NodeJS, Git, Docker, hQuery, Guzzle, Livewire, Blade, Twig, Fenom, and Smarty. I have experience in website development using Symfony, MODX and Laravel. Experie...

About author CrazyBoy49z
Ukraine, Lutsk