CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <title>Blade Templates - Laravel 12.x - The PHP Framework For Web Artisans</title> <link rel="canonical" href="https://laravel.com/docs/12.x/blade">  <meta name="title" content="Blade Templates - Laravel 12.x - The PHP Framework For Web Artisans"> <meta name="description" content="Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.">  <meta property="og:type" content="website"> <meta property="og:url" content="https://laravel.com/"> <meta property="og:title" content="Blade Templates - Laravel 12.x - The PHP Framework For Web Artisans"> <meta property="og:description" content="Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things."> <meta property="og:image" content="https://laravel.com/images/og/laravel-docs-12.png">  <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://laravel.com/"> <meta property="twitter:title" content="Blade Templates - Laravel 12.x - The PHP Framework For Web Artisans"> <meta property="twitter:description" content="Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things."> <meta property="twitter:image" content="https://laravel.com/images/og/laravel-docs-12.png">  <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"> <link rel="manifest" href="/img/favicon/site.webmanifest"> <link rel="mask-icon" href="/img/favicon/safari-pinned-tab.svg" color="#ff2d20"> <link rel="shortcut icon" href="/img/favicon/favicon.ico"> <meta name="msapplication-TileColor" content="#ff2d20"> <meta name="msapplication-config" content="/img/favicon/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> <meta name="color-scheme" content="light"> <link rel="preload" href="/fonts/InstrumentSans.woff2" as="font" type="font/woff2" crossorigin="anonymous" /> <link rel="preconnect" href="https://E3MIRNPJH5-dsn.algolia.net" crossorigin /> <link rel="preload" as="style" href="https://laravel.com/build/assets/app-BpBFBevo.css" /><link rel="modulepreload" href="https://laravel.com/build/assets/app-DsFpo0m6.js" /><link rel="modulepreload" href="https://laravel.com/build/assets/mediaQuery-Bm25Hv93.js" /><link rel="modulepreload" href="https://laravel.com/build/assets/module.esm-BKQTc33J.js" /><link rel="modulepreload" href="https://laravel.com/build/assets/docs-BJ6c096-.js" /><link rel="modulepreload" href="https://laravel.com/build/assets/theme-switcher-CvREX8Sp.js" /><link rel="stylesheet" href="https://laravel.com/build/assets/app-BpBFBevo.css" /><script type="module" src="https://laravel.com/build/assets/app-DsFpo0m6.js"></script><script type="module" src="https://laravel.com/build/assets/docs-BJ6c096-.js"></script>  <script src="https://cdn.usefathom.com/script.js" data-site="DVMEKBYF" defer></script>   <script async src="https://tag.clearbitscripts.com/v1/pk_97d2bf69f817feb07be42fcda1460119/tags.js" referrerpolicy="strict-origin-when-cross-origin"></script> <script> const alwaysLightMode = false; const algolia_app_id = 'E3MIRNPJH5'; const algolia_search_key = '1fa3a8fec06eb1858d6ca137211225c0'; const version = '12.x'; if (!alwaysLightMode) { if (localStorage.theme === 'dark' || (localStorage.theme === 'system' && window.matchMedia("(prefers-color-scheme: dark)").matches)) { document.documentElement.classList.add("dark"); document.documentElement.setAttribute("data-theme", "dark"); document.documentElement.setAttribute("color-theme", "dark"); } } </script> <script> document.addEventListener('DOMContentLoaded', function () { // Set a CSS variable for the viewport width for the divider component document.documentElement.style.setProperty('--viewport-width', (document.body.clientWidth || 0)+'px'); }); window.addEventListener('resize', function () { document.documentElement.style.setProperty('--viewport-width', (document.body.clientWidth || 0)+'px'); }, { passive: true }); </script> </head> <body class="font-sans antialiased text-sand-light-12 bg-sand-light-1 dark:bg-sand-dark-1"> <div class="xl:px-0 mx-auto xl:max-w-[1400px] w-full max-w-full"> <div class="relative xl:border-l xl:mx-auto bg-sand-light-1 dark:bg-sand-dark-1 xl:border-sand-light-7 xl:dark:border-sand-dark-6"> <div id="nav-trigger" class="absolute left-0 top-32"></div> <nav class="sticky top-0 z-99 px-4 xl:px-16 py-8 h-(--popover-top-offset) dark:bg-sand-dark-1 transition-transform duration-300 bg-sand-light-1 border-b border-transparent sticky-nav docs-nav"> <div class="grid grid-cols-12 gap-4 lg:gap-6 xl:gap-x-10 relative items-center h-full overflow-hidden"> <ul class="flex items-start col-span-3 space-x-8 font-medium "> <li class="w-20 transition-transform duration-300 ease-in-out mr-18 text-laravel-red" id="nav-left"> <a href="https://laravel.com" class="flex items-center w-20 aspect-[80/23]"> <svg class="w-full h-full" width="1280" height="308" viewBox="0 0 1280 308" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M50.2753 0H0V308.689H144.713V263.27H50.2753V0Z" fill="currentColor" /> <path d="M322.209 130.973C315.796 120.684 306.688 112.602 294.883 106.718C283.081 100.84 271.201 97.8969 259.253 97.8969C243.798 97.8969 229.665 100.764 216.843 106.496C204.014 112.228 193.015 120.099 183.834 130.091C174.654 140.088 167.51 151.628 162.412 164.706C157.308 177.792 154.761 191.54 154.761 205.94C154.761 220.645 157.308 234.457 162.412 247.39C167.508 260.332 174.652 271.796 183.834 281.788C193.015 291.785 204.017 299.647 216.843 305.379C229.665 311.111 243.798 313.978 259.253 313.978C271.201 313.978 283.081 311.038 294.883 305.159C306.688 299.282 315.796 291.197 322.209 280.904V308.685H369.865V103.186H322.209V130.973ZM317.837 231.076C314.922 239.016 310.841 245.925 305.598 251.804C300.35 257.687 294.009 262.389 286.579 265.917C279.146 269.445 270.905 271.208 261.875 271.208C252.837 271.208 244.676 269.445 237.391 265.917C230.104 262.389 223.839 257.687 218.593 251.804C213.345 245.925 209.335 239.016 206.57 231.076C203.794 223.138 202.417 214.759 202.417 205.942C202.417 197.12 203.794 188.742 206.57 180.804C209.335 172.866 213.345 165.961 218.593 160.078C223.839 154.201 230.102 149.493 237.391 145.965C244.676 142.437 252.837 140.674 261.875 140.674C270.908 140.674 279.146 142.437 286.579 145.965C294.009 149.493 300.35 154.199 305.598 160.078C310.844 165.961 314.922 172.866 317.837 180.804C320.748 188.742 322.209 197.12 322.209 205.942C322.209 214.759 320.748 223.138 317.837 231.076Z" fill="currentColor" /> <path d="M709.568 130.973C703.155 120.684 694.047 112.602 682.242 106.718C670.44 100.84 658.56 97.8969 646.612 97.8969C631.157 97.8969 617.024 100.764 604.202 106.496C591.373 112.228 580.374 120.099 571.193 130.091C562.013 140.088 554.869 151.628 549.771 164.706C544.666 177.792 542.12 191.54 542.12 205.94C542.12 220.645 544.666 234.457 549.771 247.39C554.867 260.332 562.01 271.796 571.193 281.788C580.374 291.785 591.375 299.647 604.202 305.379C617.024 311.111 631.157 313.978 646.612 313.978C658.56 313.978 670.44 311.038 682.242 305.159C694.047 299.282 703.155 291.197 709.568 280.904V308.685H757.224V103.186H709.568V130.973ZM705.198 231.076C702.283 239.016 698.202 245.925 692.959 251.804C687.711 257.687 681.37 262.389 673.94 265.917C666.507 269.445 658.266 271.208 649.236 271.208C640.198 271.208 632.037 269.445 624.752 265.917C617.465 262.389 611.2 257.687 605.954 251.804C600.706 245.925 596.696 239.016 593.931 231.076C591.155 223.138 589.778 214.759 589.778 205.942C589.778 197.12 591.155 188.742 593.931 180.804C596.696 172.866 600.706 165.961 605.954 160.078C611.2 154.201 617.463 149.493 624.752 145.965C632.037 142.437 640.198 140.674 649.236 140.674C658.269 140.674 666.507 142.437 673.94 145.965C681.37 149.493 687.711 154.199 692.959 160.078C698.205 165.961 702.283 172.866 705.198 180.804C708.109 188.742 709.57 197.12 709.57 205.942C709.568 214.759 708.107 223.138 705.198 231.076Z" fill="currentColor" /> <path d="M1280 1.12315e-05H1232.35V308.689H1280V1.12315e-05Z" fill="currentColor" /> <path d="M407.466 308.689H455.117V150.486H536.876V103.192H407.466V308.689Z" fill="currentColor" /> <path d="M948.281 103.192L888.386 260.557L828.489 103.192H780.224L858.441 308.689H918.331L996.546 103.192H948.281Z" fill="currentColor" /> <path d="M1100.48 97.908C1042.13 97.908 995.937 146.279 995.937 205.944C995.937 271.9 1040.64 313.98 1106.59 313.98C1143.5 313.98 1167.06 299.745 1195.85 268.746L1163.66 243.621C1163.64 243.646 1139.36 275.802 1103.1 275.802C1060.96 275.802 1043.22 241.533 1043.22 223.803H1201.32C1209.62 155.913 1165.37 97.908 1100.48 97.908ZM1043.35 188.085C1043.71 184.13 1049.2 136.086 1100.1 136.086C1151.01 136.086 1157.19 184.123 1157.55 188.085H1043.35Z" fill="currentColor" /> </svg> <span class="sr-only">Home</span> </a> </li> </ul> <div class="absolute top-0 flex items-center p-2 cursor-pointer right-9 lg:right-auto lg:top-auto lg:relative lg:col-span-6 lg:w-full lg:hover:bg-sand-light-4 lg:dark:hover:bg-sand-dark-4 rounded-xs lg:dark:bg-sand-dark-5 lg:bg-sand-light-3 text-sand-light-9-alpha-45 dark:text-sand-dark-11"> <svg class="w-6 h-6 lg:w-5 lg:h-5 lg:mr-2 shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" > <g> <path d="M15.8333 15.8333L13.0523 13.0524M13.0523 13.0524C13.9943 12.1104 14.5769 10.8092 14.5769 9.3718C14.5769 6.49708 12.2465 4.16667 9.37176 4.16667C6.49704 4.16667 4.16663 6.49708 4.16663 9.3718C4.16663 12.2465 6.49704 14.5769 9.37176 14.5769C10.8091 14.5769 12.1104 13.9943 13.0523 13.0524Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> </g> </svg> <div class="grow"> <div id="docsearch" class="absolute inset-0 lg:*:px-9 lg:*:py-1.5 *:absolute *:inset-0 text-base bg-transparent text-sand-light-9-alpha-45/70 dark:text-sand-dark-10"></div> </div> <span class="ml-2 hidden lg:block mr-1.5 text-sm font-medium shrink-0 text-sand-light-9 dark:text-sand-dark-10">⌘K</span> </div> <div class="flex items-center justify-end col-span-9 gap-4 lg:col-span-3 dark:text-sand-dark-12"> <select x-data aria-label="Laravel version" @change="window.location = $event.target.value" class="hidden text-sm py-1.5 px-3 bg-sand-light-1 dark:bg-sand-dark-1 border-0 whitespace-nowrap lg:block" > <option value="https://laravel.com/docs/master/blade"> Version Master </option> <option selected value="https://laravel.com/docs/12.x/blade"> Version 12.x </option> <option value="https://laravel.com/docs/11.x/blade"> Version 11.x </option> <option value="https://laravel.com/docs/10.x/blade"> Version 10.x </option> <option value="https://laravel.com/docs/9.x/blade"> Version 9.x </option> <option value="https://laravel.com/docs/8.x/blade"> Version 8.x </option> <option value="https://laravel.com/docs/7.x/blade"> Version 7.x </option> <option value="https://laravel.com/docs/6.x/blade"> Version 6.x </option> <option value="https://laravel.com/docs/5.8/blade"> Version 5.8 </option> <option value="https://laravel.com/docs/5.7/blade"> Version 5.7 </option> <option value="https://laravel.com/docs/5.6/blade"> Version 5.6 </option> <option value="https://laravel.com/docs/5.5/blade"> Version 5.5 </option> <option value="https://laravel.com/docs/5.4/blade"> Version 5.4 </option> <option value="https://laravel.com/docs/5.3/blade"> Version 5.3 </option> <option value="https://laravel.com/docs/5.2/blade"> Version 5.2 </option> <option value="https://laravel.com/docs/5.1/blade"> Version 5.1 </option> <option value="https://laravel.com/docs/5.0/blade"> Version 5.0 </option> <option value="https://laravel.com/docs/4.2/blade"> Version 4.2 </option> </select> <select x-data aria-label="Laravel version" @change="window.location = $event.target.value" class="text-sm py-1.5 px-3 bg-sand-light-1 dark:bg-sand-dark-1 border-0 whitespace-nowrap lg:hidden" > <option value="https://laravel.com/docs/master/blade"> vMaster </option> <option selected value="https://laravel.com/docs/12.x/blade"> v12.x </option> <option value="https://laravel.com/docs/11.x/blade"> v11.x </option> <option value="https://laravel.com/docs/10.x/blade"> v10.x </option> <option value="https://laravel.com/docs/9.x/blade"> v9.x </option> <option value="https://laravel.com/docs/8.x/blade"> v8.x </option> <option value="https://laravel.com/docs/7.x/blade"> v7.x </option> <option value="https://laravel.com/docs/6.x/blade"> v6.x </option> <option value="https://laravel.com/docs/5.8/blade"> v5.8 </option> <option value="https://laravel.com/docs/5.7/blade"> v5.7 </option> <option value="https://laravel.com/docs/5.6/blade"> v5.6 </option> <option value="https://laravel.com/docs/5.5/blade"> v5.5 </option> <option value="https://laravel.com/docs/5.4/blade"> v5.4 </option> <option value="https://laravel.com/docs/5.3/blade"> v5.3 </option> <option value="https://laravel.com/docs/5.2/blade"> v5.2 </option> <option value="https://laravel.com/docs/5.1/blade"> v5.1 </option> <option value="https://laravel.com/docs/5.0/blade"> v5.0 </option> <option value="https://laravel.com/docs/4.2/blade"> v4.2 </option> </select> <div class="hidden lg:block"> <div class="flex items-center size-8 group" x-data="themeSwitcher" x-on:switch-theme.window="saveAndUpdate($event.detail)"> <button id="header__sun" @click="toSystemMode" title="Switch to system theme" class="size-8 cursor-default flex items-center justify-center text-sand-light-12 group-hover:text-sand-light-10 dark:text-sand-dark-12 dark:group-hover:text-sand-dark-10 transition duration-100 focus:outline-none focus:shadow-outline"> <svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.0002 3.29071V1.76746M5.8418 18.1585L4.7647 19.2356M12.0002 22.2326V20.7093M19.2357 4.76456L18.1586 5.84166M20.7095 12H22.2327M18.1586 18.1584L19.2357 19.2355M1.76758 12H3.29083M4.76462 4.7645L5.84173 5.8416M15.7123 8.2877C17.7626 10.338 17.7626 13.6621 15.7123 15.7123C13.6621 17.7626 10.338 17.7626 8.2877 15.7123C6.23745 13.6621 6.23745 10.338 8.2877 8.2877C10.338 6.23745 13.6621 6.23745 15.7123 8.2877Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"/> </svg> </button> <button id="header__moon" @click="toLightMode" title="Switch to light mode" class="size-8 cursor-default flex items-center justify-center text-sand-light-12 group-hover:text-sand-light-10 dark:text-sand-dark-12 dark:group-hover:text-sand-dark-10 transition duration-100 focus:outline-none focus:shadow-outline"> <svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.2496 14.1987C19.5326 14.3951 18.7782 14.5 18 14.5C13.3056 14.5 9.5 10.6944 9.5 5.99999C9.5 5.22185 9.60487 4.4674 9.80124 3.75043C6.15452 4.72095 3.46777 8.04578 3.46777 11.9981C3.46777 16.7114 7.28864 20.5323 12.0019 20.5323C15.9543 20.5323 19.2791 17.8455 20.2496 14.1987ZM20.5196 12.5328C19.7378 12.8346 18.8882 13 18 13C14.134 13 11 9.86598 11 5.99999C11 5.11181 11.1654 4.26226 11.4671 3.48047C11.6142 3.09951 11.7935 2.73464 12.0019 2.38923C12.0888 2.24526 12.1807 2.10466 12.2774 1.9677C12.1858 1.96523 12.094 1.96399 12.0019 1.96399C11.4758 1.96399 10.9592 2.00448 10.455 2.0825C5.64774 2.8264 1.96777 6.98251 1.96777 11.9981C1.96777 17.5398 6.46021 22.0323 12.0019 22.0323C17.0176 22.0323 21.1737 18.3523 21.9176 13.545C21.9956 13.0408 22.0361 12.5242 22.0361 11.9981C22.0361 11.906 22.0348 11.8141 22.0323 11.7226C21.8953 11.8193 21.7547 11.9112 21.6107 11.9981C21.2653 12.2065 20.9005 12.3858 20.5196 12.5328Z" fill="currentColor"/> <path d="M16.3333 5.33333L17.5 3L18.6667 5.33333L21 6.5L18.6667 7.66667L17.5 10L16.3333 7.66667L14 6.5L16.3333 5.33333Z" fill="currentColor"/> </svg> </button> <button id="header__indeterminate" @click="toDarkMode" title="Switch to dark mode" class="size-8 cursor-default flex items-center justify-center text-sand-light-12 group-hover:text-sand-light-10 dark:text-sand-dark-12 dark:group-hover:text-sand-dark-10 transition duration-100 focus:outline-none focus:shadow-outline"> <svg class="size-6 dark:hidden" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5V3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor" /> </svg> <svg class="size-6 hidden dark:block" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5V3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor"/> </svg> </button> </div> </div> <button popovertarget="docs-nav-mobile" class="cursor-pointer ml-13 lg:hidden"> <svg class="w-6 h-6 text-sand-light-9 hamburger-menu" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2.75 7.25H21.25M2.75 16.75H21.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" /> </svg> <svg class="w-6 h-6 text-sand-light-9 close-menu" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M4.75 4.75L19.25 19.25M19.25 4.75L4.75 19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" /> </svg> </button> </div> </div> </nav> <div popover id="docs-nav-mobile" class="fixed w-full bg-transparent main-nav-popover top-(--popover-top-offset)"> <div class="px-5 py-8 h-[calc(100dvh-5.5rem)] relative overflow-auto border-b docs_sidebar bg-sand-light-1 dark:bg-sand-dark-1"> <div class="absolute top-5 right-8"> <div class="flex items-center size-8 group" x-data="themeSwitcher" x-on:switch-theme.window="saveAndUpdate($event.detail)"> <button id="header__sun" @click="toSystemMode" title="Switch to system theme" class="size-8 cursor-default flex items-center justify-center text-sand-light-12 group-hover:text-sand-light-10 dark:text-sand-dark-12 dark:group-hover:text-sand-dark-10 transition duration-100 focus:outline-none focus:shadow-outline"> <svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.0002 3.29071V1.76746M5.8418 18.1585L4.7647 19.2356M12.0002 22.2326V20.7093M19.2357 4.76456L18.1586 5.84166M20.7095 12H22.2327M18.1586 18.1584L19.2357 19.2355M1.76758 12H3.29083M4.76462 4.7645L5.84173 5.8416M15.7123 8.2877C17.7626 10.338 17.7626 13.6621 15.7123 15.7123C13.6621 17.7626 10.338 17.7626 8.2877 15.7123C6.23745 13.6621 6.23745 10.338 8.2877 8.2877C10.338 6.23745 13.6621 6.23745 15.7123 8.2877Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="round"/> </svg> </button> <button id="header__moon" @click="toLightMode" title="Switch to light mode" class="size-8 cursor-default flex items-center justify-center text-sand-light-12 group-hover:text-sand-light-10 dark:text-sand-dark-12 dark:group-hover:text-sand-dark-10 transition duration-100 focus:outline-none focus:shadow-outline"> <svg class="size-6" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.2496 14.1987C19.5326 14.3951 18.7782 14.5 18 14.5C13.3056 14.5 9.5 10.6944 9.5 5.99999C9.5 5.22185 9.60487 4.4674 9.80124 3.75043C6.15452 4.72095 3.46777 8.04578 3.46777 11.9981C3.46777 16.7114 7.28864 20.5323 12.0019 20.5323C15.9543 20.5323 19.2791 17.8455 20.2496 14.1987ZM20.5196 12.5328C19.7378 12.8346 18.8882 13 18 13C14.134 13 11 9.86598 11 5.99999C11 5.11181 11.1654 4.26226 11.4671 3.48047C11.6142 3.09951 11.7935 2.73464 12.0019 2.38923C12.0888 2.24526 12.1807 2.10466 12.2774 1.9677C12.1858 1.96523 12.094 1.96399 12.0019 1.96399C11.4758 1.96399 10.9592 2.00448 10.455 2.0825C5.64774 2.8264 1.96777 6.98251 1.96777 11.9981C1.96777 17.5398 6.46021 22.0323 12.0019 22.0323C17.0176 22.0323 21.1737 18.3523 21.9176 13.545C21.9956 13.0408 22.0361 12.5242 22.0361 11.9981C22.0361 11.906 22.0348 11.8141 22.0323 11.7226C21.8953 11.8193 21.7547 11.9112 21.6107 11.9981C21.2653 12.2065 20.9005 12.3858 20.5196 12.5328Z" fill="currentColor"/> <path d="M16.3333 5.33333L17.5 3L18.6667 5.33333L21 6.5L18.6667 7.66667L17.5 10L16.3333 7.66667L14 6.5L16.3333 5.33333Z" fill="currentColor"/> </svg> </button> <button id="header__indeterminate" @click="toDarkMode" title="Switch to dark mode" class="size-8 cursor-default flex items-center justify-center text-sand-light-12 group-hover:text-sand-light-10 dark:text-sand-dark-12 dark:group-hover:text-sand-dark-10 transition duration-100 focus:outline-none focus:shadow-outline"> <svg class="size-6 dark:hidden" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5V3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor" /> </svg> <svg class="size-6 hidden dark:block" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5V3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="currentColor"/> </svg> </button> </div> </div> <ul> <li> <h2>Prologue</h2> <ul> <li><a href="/docs/12.x/releases">Release Notes</a></li> <li><a href="/docs/12.x/upgrade">Upgrade Guide</a></li> <li><a href="/docs/12.x/contributions">Contribution Guide</a></li> </ul> </li> <li> <h2>Getting Started</h2> <ul> <li><a href="/docs/12.x/installation">Installation</a></li> <li><a href="/docs/12.x/configuration">Configuration</a></li> <li><a href="/docs/12.x/structure">Directory Structure</a></li> <li><a href="/docs/12.x/frontend">Frontend</a></li> <li><a href="/docs/12.x/starter-kits">Starter Kits</a></li> <li><a href="/docs/12.x/deployment">Deployment</a></li> </ul> </li> <li> <h2>Architecture Concepts</h2> <ul> <li><a href="/docs/12.x/lifecycle">Request Lifecycle</a></li> <li><a href="/docs/12.x/container">Service Container</a></li> <li><a href="/docs/12.x/providers">Service Providers</a></li> <li><a href="/docs/12.x/facades">Facades</a></li> </ul> </li> <li class="sub--on"> <h2>The Basics</h2> <ul> <li><a href="/docs/12.x/routing">Routing</a></li> <li><a href="/docs/12.x/middleware">Middleware</a></li> <li><a href="/docs/12.x/csrf">CSRF Protection</a></li> <li><a href="/docs/12.x/controllers">Controllers</a></li> <li><a href="/docs/12.x/requests">Requests</a></li> <li><a href="/docs/12.x/responses">Responses</a></li> <li><a href="/docs/12.x/views">Views</a></li> <li class="active"><a href="/docs/12.x/blade">Blade Templates</a></li> <li><a href="/docs/12.x/vite">Asset Bundling</a></li> <li><a href="/docs/12.x/urls">URL Generation</a></li> <li><a href="/docs/12.x/session">Session</a></li> <li><a href="/docs/12.x/validation">Validation</a></li> <li><a href="/docs/12.x/errors">Error Handling</a></li> <li><a href="/docs/12.x/logging">Logging</a></li> </ul> </li> <li> <h2>Digging Deeper</h2> <ul> <li><a href="/docs/12.x/artisan">Artisan Console</a></li> <li><a href="/docs/12.x/broadcasting">Broadcasting</a></li> <li><a href="/docs/12.x/cache">Cache</a></li> <li><a href="/docs/12.x/collections">Collections</a></li> <li><a href="/docs/12.x/concurrency">Concurrency</a></li> <li><a href="/docs/12.x/context">Context</a></li> <li><a href="/docs/12.x/contracts">Contracts</a></li> <li><a href="/docs/12.x/events">Events</a></li> <li><a href="/docs/12.x/filesystem">File Storage</a></li> <li><a href="/docs/12.x/helpers">Helpers</a></li> <li><a href="/docs/12.x/http-client">HTTP Client</a></li> <li><a href="/docs/12.x/localization">Localization</a></li> <li><a href="/docs/12.x/mail">Mail</a></li> <li><a href="/docs/12.x/notifications">Notifications</a></li> <li><a href="/docs/12.x/packages">Package Development</a></li> <li><a href="/docs/12.x/processes">Processes</a></li> <li><a href="/docs/12.x/queues">Queues</a></li> <li><a href="/docs/12.x/rate-limiting">Rate Limiting</a></li> <li><a href="/docs/12.x/strings">Strings</a></li> <li><a href="/docs/12.x/scheduling">Task Scheduling</a></li> </ul> </li> <li> <h2>Security</h2> <ul> <li><a href="/docs/12.x/authentication">Authentication</a></li> <li><a href="/docs/12.x/authorization">Authorization</a></li> <li><a href="/docs/12.x/verification">Email Verification</a></li> <li><a href="/docs/12.x/encryption">Encryption</a></li> <li><a href="/docs/12.x/hashing">Hashing</a></li> <li><a href="/docs/12.x/passwords">Password Reset</a></li> </ul> </li> <li> <h2>Database</h2> <ul> <li><a href="/docs/12.x/database">Getting Started</a></li> <li><a href="/docs/12.x/queries">Query Builder</a></li> <li><a href="/docs/12.x/pagination">Pagination</a></li> <li><a href="/docs/12.x/migrations">Migrations</a></li> <li><a href="/docs/12.x/seeding">Seeding</a></li> <li><a href="/docs/12.x/redis">Redis</a></li> <li><a href="/docs/12.x/mongodb">MongoDB</a></li> </ul> </li> <li> <h2>Eloquent ORM</h2> <ul> <li><a href="/docs/12.x/eloquent">Getting Started</a></li> <li><a href="/docs/12.x/eloquent-relationships">Relationships</a></li> <li><a href="/docs/12.x/eloquent-collections">Collections</a></li> <li><a href="/docs/12.x/eloquent-mutators">Mutators / Casts</a></li> <li><a href="/docs/12.x/eloquent-resources">API Resources</a></li> <li><a href="/docs/12.x/eloquent-serialization">Serialization</a></li> <li><a href="/docs/12.x/eloquent-factories">Factories</a></li> </ul> </li> <li> <h2>Testing</h2> <ul> <li><a href="/docs/12.x/testing">Getting Started</a></li> <li><a href="/docs/12.x/http-tests">HTTP Tests</a></li> <li><a href="/docs/12.x/console-tests">Console Tests</a></li> <li><a href="/docs/12.x/dusk">Browser Tests</a></li> <li><a href="/docs/12.x/database-testing">Database</a></li> <li><a href="/docs/12.x/mocking">Mocking</a></li> </ul> </li> <li> <h2>Packages</h2> <ul> <li><a href="/docs/12.x/billing">Cashier (Stripe)</a></li> <li><a href="/docs/12.x/cashier-paddle">Cashier (Paddle)</a></li> <li><a href="/docs/12.x/dusk">Dusk</a></li> <li><a href="/docs/12.x/envoy">Envoy</a></li> <li><a href="/docs/12.x/fortify">Fortify</a></li> <li><a href="/docs/12.x/folio">Folio</a></li> <li><a href="/docs/12.x/homestead">Homestead</a></li> <li><a href="/docs/12.x/horizon">Horizon</a></li> <li><a href="/docs/12.x/mix">Mix</a></li> <li><a href="/docs/12.x/octane">Octane</a></li> <li><a href="/docs/12.x/passport">Passport</a></li> <li><a href="/docs/12.x/pennant">Pennant</a></li> <li><a href="/docs/12.x/pint">Pint</a></li> <li><a href="/docs/12.x/precognition">Precognition</a></li> <li><a href="/docs/12.x/prompts">Prompts</a></li> <li><a href="/docs/12.x/pulse">Pulse</a></li> <li><a href="/docs/12.x/reverb">Reverb</a></li> <li><a href="/docs/12.x/sail">Sail</a></li> <li><a href="/docs/12.x/sanctum">Sanctum</a></li> <li><a href="/docs/12.x/scout">Scout</a></li> <li><a href="/docs/12.x/socialite">Socialite</a></li> <li><a href="/docs/12.x/telescope">Telescope</a></li> <li><a href="/docs/12.x/valet">Valet</a></li> </ul> </li> <li><a href="https://api.laravel.com/docs/12.x">API Documentation</a></li> </ul> </div> </div> <div class="px-4 xl:px-16"> <a id="skip-to-content-link" href="#main-content" class="absolute bg-gray-100 px-4 py-2 top-3 left-3 text-gray-700 shadow-xl" > Skip to content </a> <div class="grid grid-cols-12 gap-4 lg:gap-6 xl:gap-x-10 px-6 mt-10 lg:px-0" id="docsScreen"> <aside class="relative col-span-3 lg:pb-6"> <div class="sticky bottom-0 left-0 z-20 hidden top-22 lg:block"> <div class="relative flex flex-col flex-1 max-h-screen pl-16 -ml-16 overflow-auto sticky-side-nav"> <nav id="indexed-nav" class="hidden lg:block"> <div class="docs_sidebar"> <ul> <li> <h2>Prologue</h2> <ul> <li><a href="/docs/12.x/releases">Release Notes</a></li> <li><a href="/docs/12.x/upgrade">Upgrade Guide</a></li> <li><a href="/docs/12.x/contributions">Contribution Guide</a></li> </ul> </li> <li> <h2>Getting Started</h2> <ul> <li><a href="/docs/12.x/installation">Installation</a></li> <li><a href="/docs/12.x/configuration">Configuration</a></li> <li><a href="/docs/12.x/structure">Directory Structure</a></li> <li><a href="/docs/12.x/frontend">Frontend</a></li> <li><a href="/docs/12.x/starter-kits">Starter Kits</a></li> <li><a href="/docs/12.x/deployment">Deployment</a></li> </ul> </li> <li> <h2>Architecture Concepts</h2> <ul> <li><a href="/docs/12.x/lifecycle">Request Lifecycle</a></li> <li><a href="/docs/12.x/container">Service Container</a></li> <li><a href="/docs/12.x/providers">Service Providers</a></li> <li><a href="/docs/12.x/facades">Facades</a></li> </ul> </li> <li class="sub--on"> <h2>The Basics</h2> <ul> <li><a href="/docs/12.x/routing">Routing</a></li> <li><a href="/docs/12.x/middleware">Middleware</a></li> <li><a href="/docs/12.x/csrf">CSRF Protection</a></li> <li><a href="/docs/12.x/controllers">Controllers</a></li> <li><a href="/docs/12.x/requests">Requests</a></li> <li><a href="/docs/12.x/responses">Responses</a></li> <li><a href="/docs/12.x/views">Views</a></li> <li class="active"><a href="/docs/12.x/blade">Blade Templates</a></li> <li><a href="/docs/12.x/vite">Asset Bundling</a></li> <li><a href="/docs/12.x/urls">URL Generation</a></li> <li><a href="/docs/12.x/session">Session</a></li> <li><a href="/docs/12.x/validation">Validation</a></li> <li><a href="/docs/12.x/errors">Error Handling</a></li> <li><a href="/docs/12.x/logging">Logging</a></li> </ul> </li> <li> <h2>Digging Deeper</h2> <ul> <li><a href="/docs/12.x/artisan">Artisan Console</a></li> <li><a href="/docs/12.x/broadcasting">Broadcasting</a></li> <li><a href="/docs/12.x/cache">Cache</a></li> <li><a href="/docs/12.x/collections">Collections</a></li> <li><a href="/docs/12.x/concurrency">Concurrency</a></li> <li><a href="/docs/12.x/context">Context</a></li> <li><a href="/docs/12.x/contracts">Contracts</a></li> <li><a href="/docs/12.x/events">Events</a></li> <li><a href="/docs/12.x/filesystem">File Storage</a></li> <li><a href="/docs/12.x/helpers">Helpers</a></li> <li><a href="/docs/12.x/http-client">HTTP Client</a></li> <li><a href="/docs/12.x/localization">Localization</a></li> <li><a href="/docs/12.x/mail">Mail</a></li> <li><a href="/docs/12.x/notifications">Notifications</a></li> <li><a href="/docs/12.x/packages">Package Development</a></li> <li><a href="/docs/12.x/processes">Processes</a></li> <li><a href="/docs/12.x/queues">Queues</a></li> <li><a href="/docs/12.x/rate-limiting">Rate Limiting</a></li> <li><a href="/docs/12.x/strings">Strings</a></li> <li><a href="/docs/12.x/scheduling">Task Scheduling</a></li> </ul> </li> <li> <h2>Security</h2> <ul> <li><a href="/docs/12.x/authentication">Authentication</a></li> <li><a href="/docs/12.x/authorization">Authorization</a></li> <li><a href="/docs/12.x/verification">Email Verification</a></li> <li><a href="/docs/12.x/encryption">Encryption</a></li> <li><a href="/docs/12.x/hashing">Hashing</a></li> <li><a href="/docs/12.x/passwords">Password Reset</a></li> </ul> </li> <li> <h2>Database</h2> <ul> <li><a href="/docs/12.x/database">Getting Started</a></li> <li><a href="/docs/12.x/queries">Query Builder</a></li> <li><a href="/docs/12.x/pagination">Pagination</a></li> <li><a href="/docs/12.x/migrations">Migrations</a></li> <li><a href="/docs/12.x/seeding">Seeding</a></li> <li><a href="/docs/12.x/redis">Redis</a></li> <li><a href="/docs/12.x/mongodb">MongoDB</a></li> </ul> </li> <li> <h2>Eloquent ORM</h2> <ul> <li><a href="/docs/12.x/eloquent">Getting Started</a></li> <li><a href="/docs/12.x/eloquent-relationships">Relationships</a></li> <li><a href="/docs/12.x/eloquent-collections">Collections</a></li> <li><a href="/docs/12.x/eloquent-mutators">Mutators / Casts</a></li> <li><a href="/docs/12.x/eloquent-resources">API Resources</a></li> <li><a href="/docs/12.x/eloquent-serialization">Serialization</a></li> <li><a href="/docs/12.x/eloquent-factories">Factories</a></li> </ul> </li> <li> <h2>Testing</h2> <ul> <li><a href="/docs/12.x/testing">Getting Started</a></li> <li><a href="/docs/12.x/http-tests">HTTP Tests</a></li> <li><a href="/docs/12.x/console-tests">Console Tests</a></li> <li><a href="/docs/12.x/dusk">Browser Tests</a></li> <li><a href="/docs/12.x/database-testing">Database</a></li> <li><a href="/docs/12.x/mocking">Mocking</a></li> </ul> </li> <li> <h2>Packages</h2> <ul> <li><a href="/docs/12.x/billing">Cashier (Stripe)</a></li> <li><a href="/docs/12.x/cashier-paddle">Cashier (Paddle)</a></li> <li><a href="/docs/12.x/dusk">Dusk</a></li> <li><a href="/docs/12.x/envoy">Envoy</a></li> <li><a href="/docs/12.x/fortify">Fortify</a></li> <li><a href="/docs/12.x/folio">Folio</a></li> <li><a href="/docs/12.x/homestead">Homestead</a></li> <li><a href="/docs/12.x/horizon">Horizon</a></li> <li><a href="/docs/12.x/mix">Mix</a></li> <li><a href="/docs/12.x/octane">Octane</a></li> <li><a href="/docs/12.x/passport">Passport</a></li> <li><a href="/docs/12.x/pennant">Pennant</a></li> <li><a href="/docs/12.x/pint">Pint</a></li> <li><a href="/docs/12.x/precognition">Precognition</a></li> <li><a href="/docs/12.x/prompts">Prompts</a></li> <li><a href="/docs/12.x/pulse">Pulse</a></li> <li><a href="/docs/12.x/reverb">Reverb</a></li> <li><a href="/docs/12.x/sail">Sail</a></li> <li><a href="/docs/12.x/sanctum">Sanctum</a></li> <li><a href="/docs/12.x/scout">Scout</a></li> <li><a href="/docs/12.x/socialite">Socialite</a></li> <li><a href="/docs/12.x/telescope">Telescope</a></li> <li><a href="/docs/12.x/valet">Valet</a></li> </ul> </li> <li><a href="https://api.laravel.com/docs/12.x">API Documentation</a></li> </ul> </div> </nav> </div> </div> </aside> <section class="col-span-12 lg:col-span-9 xl:col-span-6"> <div> <section> <section class="docs_main max-w-prose"> <div id="main-content"> <h1>Blade Templates</h1> <ul> <li><a href="#introduction">Introduction</a> <ul> <li><a href="#supercharging-blade-with-livewire">Supercharging Blade With Livewire</a></li> </ul> </li> <li><a href="#displaying-data">Displaying Data</a> <ul> <li><a href="#html-entity-encoding">HTML Entity Encoding</a></li> <li><a href="#blade-and-javascript-frameworks">Blade and JavaScript Frameworks</a></li> </ul> </li> <li><a href="#blade-directives">Blade Directives</a> <ul> <li><a href="#if-statements">If Statements</a></li> <li><a href="#switch-statements">Switch Statements</a></li> <li><a href="#loops">Loops</a></li> <li><a href="#the-loop-variable">The Loop Variable</a></li> <li><a href="#conditional-classes">Conditional Classes</a></li> <li><a href="#additional-attributes">Additional Attributes</a></li> <li><a href="#including-subviews">Including Subviews</a></li> <li><a href="#the-once-directive">The <code>@once</code> Directive</a></li> <li><a href="#raw-php">Raw PHP</a></li> <li><a href="#comments">Comments</a></li> </ul> </li> <li><a href="#components">Components</a> <ul> <li><a href="#rendering-components">Rendering Components</a></li> <li><a href="#index-components">Index Components</a></li> <li><a href="#passing-data-to-components">Passing Data to Components</a></li> <li><a href="#component-attributes">Component Attributes</a></li> <li><a href="#reserved-keywords">Reserved Keywords</a></li> <li><a href="#slots">Slots</a></li> <li><a href="#inline-component-views">Inline Component Views</a></li> <li><a href="#dynamic-components">Dynamic Components</a></li> <li><a href="#manually-registering-components">Manually Registering Components</a></li> </ul> </li> <li><a href="#anonymous-components">Anonymous Components</a> <ul> <li><a href="#anonymous-index-components">Anonymous Index Components</a></li> <li><a href="#data-properties-attributes">Data Properties / Attributes</a></li> <li><a href="#accessing-parent-data">Accessing Parent Data</a></li> <li><a href="#anonymous-component-paths">Anonymous Components Paths</a></li> </ul> </li> <li><a href="#building-layouts">Building Layouts</a> <ul> <li><a href="#layouts-using-components">Layouts Using Components</a></li> <li><a href="#layouts-using-template-inheritance">Layouts Using Template Inheritance</a></li> </ul> </li> <li><a href="#forms">Forms</a> <ul> <li><a href="#csrf-field">CSRF Field</a></li> <li><a href="#method-field">Method Field</a></li> <li><a href="#validation-errors">Validation Errors</a></li> </ul> </li> <li><a href="#stacks">Stacks</a></li> <li><a href="#service-injection">Service Injection</a></li> <li><a href="#rendering-inline-blade-templates">Rendering Inline Blade Templates</a></li> <li><a href="#rendering-blade-fragments">Rendering Blade Fragments</a></li> <li><a href="#extending-blade">Extending Blade</a> <ul> <li><a href="#custom-echo-handlers">Custom Echo Handlers</a></li> <li><a href="#custom-if-statements">Custom If Statements</a></li> </ul> </li> </ul> <h2 id="introduction"><a href="#introduction">Introduction</a></h2> <p>Blade is the simple, yet powerful templating engine that is included with Laravel. Unlike some PHP templating engines, Blade does not restrict you from using plain PHP code in your templates. In fact, all Blade templates are compiled into plain PHP code and cached until they are modified, meaning Blade adds essentially zero overhead to your application. Blade template files use the <code>.blade.php</code> file extension and are typically stored in the <code>resources/views</code> directory.</p> <p>Blade views may be returned from routes or controllers using the global <code>view</code> helper. Of course, as mentioned in the documentation on <a href="/docs/12.x/views">views</a>, data may be passed to the Blade view using the <code>view</code> helper's second argument:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #FFCB8B;">Route</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">get</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">()</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">view</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">greeting</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">[</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">name</span><span style="color: #D9F5DD;">'</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">=></span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Finn</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">]);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;">});</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> Route::get('/', function () { return view('greeting', ['name' => 'Finn']); });</div></code></pre> </div> <h3 id="supercharging-blade-with-livewire"><a href="#supercharging-blade-with-livewire">Supercharging Blade With Livewire</a></h3> <p>Want to take your Blade templates to the next level and build dynamic interfaces with ease? Check out <a href="https://livewire.laravel.com">Laravel Livewire</a>. Livewire allows you to write Blade components that are augmented with dynamic functionality that would typically only be possible via frontend frameworks like React or Vue, providing a great approach to building modern, reactive frontends without the complexities, client-side rendering, or build steps of many JavaScript frameworks.</p> <h2 id="displaying-data"><a href="#displaying-data">Displaying Data</a></h2> <p>You may display data that is passed to your Blade views by wrapping the variable in curly braces. For example, given the following route:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #FFCB8B;">Route</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">get</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">()</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">view</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">welcome</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">[</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">name</span><span style="color: #D9F5DD;">'</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">=></span><span style="color: #82AAFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Samantha</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">]);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;">});</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> Route::get('/', function () { return view('welcome', ['name' => 'Samantha']); });</div></code></pre> </div> <p>You may display the contents of the <code>name</code> variable like so:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">Hello, </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$name</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span><span style="color: #BFC7D5;">.</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> Hello, {{ $name }}.</div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:px-4 lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 lg:my-1.5 rounded-xs flex items-center justify-center shrink-0 bg-[#8D54C5]"> <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 20H11M5.5 14H10.5M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 10.7924 2.63505 13.2029 5 14.3264V17H11V14.3264C13.3649 13.2029 15 10.7924 15 8Z" stroke="#FDFDFC" stroke-width="1.5" stroke-linecap="square"/> </svg> </div> <p class="callout text-pretty"> Blade's <code>{{ }}</code> echo statements are automatically sent through PHP's <code>htmlspecialchars</code> function to prevent XSS attacks.</p> </div> <p>You are not limited to displaying the contents of the variables passed to the view. You may also echo the results of any PHP function. In fact, you can put any PHP code you wish inside of a Blade echo statement:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">The current UNIX timestamp is </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">time</span><span style="color: #BFC7D5;">() </span><span style="color: #89DDFF;">}}</span><span style="color: #BFC7D5;">.</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> The current UNIX timestamp is {{ time() }}.</div></code></pre> </div> <h3 id="html-entity-encoding"><a href="#html-entity-encoding">HTML Entity Encoding</a></h3> <p>By default, Blade (and the Laravel <code>e</code> function) will double encode HTML entities. If you would like to disable double encoding, call the <code>Blade::withoutDoubleEncoding</code> method from the <code>boot</code> method of your <code>AppServiceProvider</code>:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #D3423E;"><?php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;">namespace</span><span style="color: #BFC7D5;"> App\Providers;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">Blade</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\</span><span style="color: #FFCB8B;">ServiceProvider</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB6B;">AppServiceProvider</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">extends</span><span style="color: #BFC7D5;"> </span><span style="color: #A9C77D;">ServiceProvider</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #697098;"> * Bootstrap any application services.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">boot</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Blade</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">withoutDoubleEncoding</span><span style="color: #BFC7D5;">();</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <?php namespace App\Providers; use Illuminate\Support\Facades\Blade; use Illuminate\Support\ServiceProvider; class AppServiceProvider extends ServiceProvider { /** * Bootstrap any application services. */ public function boot(): void { Blade::withoutDoubleEncoding(); } }</div></code></pre> </div> <h4 id="displaying-unescaped-data"><a href="#displaying-unescaped-data">Displaying Unescaped Data</a></h4> <p>By default, Blade <code>{{ }}</code> statements are automatically sent through PHP's <code>htmlspecialchars</code> function to prevent XSS attacks. If you do not want your data to be escaped, you may use the following syntax:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">Hello, </span><span style="color: #89DDFF;">{!!</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$name</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">!!}</span><span style="color: #BFC7D5;">.</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> Hello, {!! $name !!}.</div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:px-4 lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 lg:my-1.5 rounded-xs flex items-center justify-center shrink-0 bg-[#F53003]"> <svg width="2" height="18" viewBox="0 0 2 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 17V16.99M1 1V13" stroke="#FDFDFC" stroke-width="2" stroke-linecap="square"/> </svg> </div> <p class="callout text-pretty"> Be very careful when echoing content that is supplied by users of your application. You should typically use the escaped, double curly brace syntax to prevent XSS attacks when displaying user supplied data.</p> </div> <h3 id="blade-and-javascript-frameworks"><a href="#blade-and-javascript-frameworks">Blade and JavaScript Frameworks</a></h3> <p>Since many JavaScript frameworks also use "curly" braces to indicate a given expression should be displayed in the browser, you may use the <code>@</code> symbol to inform the Blade rendering engine an expression should remain untouched. For example:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">h1</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">Laravel</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">h1</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;">Hello, </span><span style="color: #FFCB6B;">@</span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">name</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span><span style="color: #BFC7D5;">.</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <h1>Laravel</h1> Hello, @{{ name }}.</div></code></pre> </div> <p>In this example, the <code>@</code> symbol will be removed by Blade; however, <code>{{ name }}</code> expression will remain untouched by the Blade engine, allowing it to be rendered by your JavaScript framework.</p> <p>The <code>@</code> symbol may also be used to escape Blade directives:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">{{--</span><span style="color: #697098;"> Blade template </span><span style="color: #697098;">--}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;">@@if()</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #C792EA;">@if</span><span style="color: #BFC7D5;">()</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> {{-- Blade template --}} @@if()  @if()</div></code></pre> </div> <h4 id="rendering-json"><a href="#rendering-json">Rendering JSON</a></h4> <p>Sometimes you may pass an array to your view with the intention of rendering it as JSON in order to initialize a JavaScript variable. For example:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">script</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">var</span><span style="color: #BFC7D5;"> app </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #D3423E;"><?php</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">echo</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">json_encode</span><span style="color: #BFC7D5;">($</span><span style="color: #BEC5D4;">array</span><span style="color: #BFC7D5;">); </span><span style="color: #D3423E;">?></span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">script</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <script> var app = <?php echo json_encode($array); ?>; </script></div></code></pre> </div> <p>However, instead of manually calling <code>json_encode</code>, you may use the <code>Illuminate\Support\Js::from</code> method directive. The <code>from</code> method accepts the same arguments as PHP's <code>json_encode</code> function; however, it will ensure that the resulting JSON is properly escaped for inclusion within HTML quotes. The <code>from</code> method will return a string <code>JSON.parse</code> JavaScript statement that will convert the given object or array into a valid JavaScript object:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">script</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">var</span><span style="color: #BFC7D5;"> app </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> {{ Illuminate\Support\Js::</span><span style="color: #82AAFF;">from</span><span style="color: #BFC7D5;">($array) }};</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">script</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <script> var app = {{ Illuminate\Support\Js::from($array) }}; </script></div></code></pre> </div> <p>The latest versions of the Laravel application skeleton include a <code>Js</code> facade, which provides convenient access to this functionality within your Blade templates:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">script</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">var</span><span style="color: #BFC7D5;"> app </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> {{ Js::</span><span style="color: #82AAFF;">from</span><span style="color: #BFC7D5;">($array) }};</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">script</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <script> var app = {{ Js::from($array) }}; </script></div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:px-4 lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 lg:my-1.5 rounded-xs flex items-center justify-center shrink-0 bg-[#F53003]"> <svg width="2" height="18" viewBox="0 0 2 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 17V16.99M1 1V13" stroke="#FDFDFC" stroke-width="2" stroke-linecap="square"/> </svg> </div> <p class="callout text-pretty"> You should only use the <code>Js::from</code> method to render existing variables as JSON. The Blade templating is based on regular expressions and attempts to pass a complex expression to the directive may cause unexpected failures.</p> </div> <h4 id="the-at-verbatim-directive"><a href="#the-at-verbatim-directive">The <code>@verbatim</code> Directive</a></h4> <p>If you are displaying JavaScript variables in a large portion of your template, you may wrap the HTML in the <code>@verbatim</code> directive so that you do not have to prefix each Blade echo statement with an <code>@</code> symbol:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@verbatim</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">container</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> Hello, </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">name</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span><span style="color: #BFC7D5;">.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #C792EA;">@endverbatim</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @verbatim <div class="container"> Hello, {{ name }}. </div> @endverbatim</div></code></pre> </div> <h2 id="blade-directives"><a href="#blade-directives">Blade Directives</a></h2> <p>In addition to template inheritance and displaying data, Blade also provides convenient shortcuts for common PHP control structures, such as conditional statements and loops. These shortcuts provide a very clean, terse way of working with PHP control structures while also remaining familiar to their PHP counterparts.</p> <h3 id="if-statements"><a href="#if-statements">If Statements</a></h3> <p>You may construct <code>if</code> statements using the <code>@if</code>, <code>@elseif</code>, <code>@else</code>, and <code>@endif</code> directives. These directives function identically to their PHP counterparts:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@if </span><span style="color: #BFC7D5;">(</span><span style="color: #89DDFF;">count</span><span style="color: #BFC7D5;">($</span><span style="color: #BEC5D4;">records</span><span style="color: #BFC7D5;">) </span><span style="color: #C792EA;">===</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> I have one record!</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #C792EA;">@elseif </span><span style="color: #BFC7D5;">(</span><span style="color: #89DDFF;">count</span><span style="color: #BFC7D5;">($</span><span style="color: #BEC5D4;">records</span><span style="color: #BFC7D5;">) </span><span style="color: #C792EA;">></span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> I have multiple records!</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #C792EA;">@else</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> I don't have any records!</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #C792EA;">@endif</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @if (count($records) === 1) I have one record! @elseif (count($records) > 1) I have multiple records! @else I don't have any records! @endif</div></code></pre> </div> <p>For convenience, Blade also provides an <code>@unless</code> directive:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@unless </span><span style="color: #BFC7D5;">(</span><span style="color: #FFCB6B;">Auth</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">check</span><span style="color: #BFC7D5;">())</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> You are not signed in.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #C792EA;">@endunless</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @unless (Auth::check()) You are not signed in. @endunless</div></code></pre> </div> <p>In addition to the conditional directives already discussed, the <code>@isset</code> and <code>@empty</code> directives may be used as convenient shortcuts for their respective PHP functions:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@isset</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$records</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> // $records is defined and is not null...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #C792EA;">@endisset</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #C792EA;">@empty</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$records</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> // $records is "empty"...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #C792EA;">@endempty</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @isset($records) // $records is defined and is not null... @endisset @empty($records) // $records is "empty"... @endempty</div></code></pre> </div> <h4 id="authentication-directives"><a href="#authentication-directives">Authentication Directives</a></h4> <p>The <code>@auth</code> and <code>@guest</code> directives may be used to quickly determine if the current user is <a href="/docs/12.x/authentication">authenticated</a> or is a guest:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@auth</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> // The user is authenticated...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #C792EA;">@endauth</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #C792EA;">@guest</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> // The user is not authenticated...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #C792EA;">@endguest</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @auth // The user is authenticated... @endauth @guest // The user is not authenticated... @endguest</div></code></pre> </div> <p>If needed, you may specify the authentication guard that should be checked when using the <code>@auth</code> and <code>@guest</code> directives:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@auth</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">admin</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> // The user is authenticated...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #C792EA;">@endauth</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #C792EA;">@guest</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">admin</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> // The user is not authenticated...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #C792EA;">@endguest</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @auth('admin') // The user is authenticated... @endauth @guest('admin') // The user is not authenticated... @endguest</div></code></pre> </div> <h4 id="environment-directives"><a href="#environment-directives">Environment Directives</a></h4> <p>You may check if the application is running in the production environment using the <code>@production</code> directive:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@production</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> // Production specific content...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #C792EA;">@endproduction</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @production // Production specific content... @endproduction</div></code></pre> </div> <p>Or, you may determine if the application is running in a specific environment using the <code>@env</code> directive:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #82AAFF;">@env</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">staging</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> // The application is running in "staging"...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #82AAFF;">@endenv</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #82AAFF;">@env</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">staging</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">production</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">])</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> // The application is running in "staging" or "production"...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #82AAFF;">@endenv</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @env('staging') // The application is running in "staging"... @endenv @env(['staging', 'production']) // The application is running in "staging" or "production"... @endenv</div></code></pre> </div> <h4 id="section-directives"><a href="#section-directives">Section Directives</a></h4> <p>You may determine if a template inheritance section has content using the <code>@hasSection</code> directive:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@hasSection</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">navigation</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">pull-right</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@yield</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">navigation</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">clearfix</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #C792EA;">@endif</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @hasSection('navigation') <div class="pull-right"> @yield('navigation') </div> <div class="clearfix"></div> @endif</div></code></pre> </div> <p>You may use the <code>sectionMissing</code> directive to determine if a section does not have content:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@sectionMissing</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">navigation</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">pull-right</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@include</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">default-navigation</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #C792EA;">@endif</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @sectionMissing('navigation') <div class="pull-right"> @include('default-navigation') </div> @endif</div></code></pre> </div> <h4 id="session-directives"><a href="#session-directives">Session Directives</a></h4> <p>The <code>@session</code> directive may be used to determine if a <a href="/docs/12.x/session">session</a> value exists. If the session value exists, the template contents within the <code>@session</code> and <code>@endsession</code> directives will be evaluated. Within the <code>@session</code> directive's contents, you may echo the <code>$value</code> variable to display the session value:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #82AAFF;">@session</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">status</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">p-4 bg-green-100</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #82AAFF;">@endsession</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @session('status') <div class="p-4 bg-green-100"> {{ $value }} </div> @endsession</div></code></pre> </div> <h3 id="switch-statements"><a href="#switch-statements">Switch Statements</a></h3> <p>Switch statements can be constructed using the <code>@switch</code>, <code>@case</code>, <code>@break</code>, <code>@default</code> and <code>@endswitch</code> directives:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #C792EA;">@switch</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$i</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@case</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #BFC7D5;"> First case...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@break</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@case</span><span style="color: #BFC7D5;">(</span><span style="color: #F78C6C;">2</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;"> Second case...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@break</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@default</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;"> Default case...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #C792EA;">@endswitch</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @switch($i) @case(1) First case... @break @case(2) Second case... @break @default Default case... @endswitch</div></code></pre> </div> <h3 id="loops"><a href="#loops">Loops</a></h3> <p>In addition to conditional statements, Blade provides simple directives for working with PHP's loop structures. Again, each of these directives functions identically to their PHP counterparts:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #C792EA;">@for </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$i</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">0</span><span style="color: #BFC7D5;">; </span><span style="color: #BEC5D4;">$i</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;"><</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">10</span><span style="color: #BFC7D5;">; </span><span style="color: #BEC5D4;">$i</span><span style="color: #89DDFF;">++</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #BFC7D5;"> The current value is </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$i</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;">@endfor</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #C792EA;">@foreach </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">as</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">p</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">This is user </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">->id</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</</span><span style="color: #FF5572;">p</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #C792EA;">@endforeach</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #C792EA;">@forelse </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">as</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">li</span><span style="color: #89DDFF;">>{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">->name</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</</span><span style="color: #FF5572;">li</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #C792EA;">@empty</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">p</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">No users</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">p</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #C792EA;">@endforelse</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #C792EA;">@while </span><span style="color: #BFC7D5;">(</span><span style="color: #82AAFF;">true</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">p</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">I'm looping forever.</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">p</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span><span style="color: #C792EA;">@endwhile</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @for ($i = 0; $i < 10; $i++) The current value is {{ $i }} @endfor @foreach ($users as $user) <p>This is user {{ $user->id }}</p> @endforeach @forelse ($users as $user) <li>{{ $user->name }}</li> @empty <p>No users</p> @endforelse @while (true) <p>I'm looping forever.</p> @endwhile</div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:px-4 lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 lg:my-1.5 rounded-xs flex items-center justify-center shrink-0 bg-[#8D54C5]"> <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 20H11M5.5 14H10.5M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 10.7924 2.63505 13.2029 5 14.3264V17H11V14.3264C13.3649 13.2029 15 10.7924 15 8Z" stroke="#FDFDFC" stroke-width="1.5" stroke-linecap="square"/> </svg> </div> <p class="callout text-pretty"> While iterating through a <code>foreach</code> loop, you may use the <a href="#the-loop-variable">loop variable</a> to gain valuable information about the loop, such as whether you are in the first or last iteration through the loop.</p> </div> <p>When using loops you may also skip the current iteration or end the loop using the <code>@continue</code> and <code>@break</code> directives:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #C792EA;">@foreach </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">as</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@if </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">->type</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">==</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@continue</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@endif</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">li</span><span style="color: #89DDFF;">>{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">->name</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</</span><span style="color: #FF5572;">li</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@if </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">->number</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">==</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">5</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@break</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@endif</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #C792EA;">@endforeach</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @foreach ($users as $user) @if ($user->type == 1) @continue @endif <li>{{ $user->name }}</li> @if ($user->number == 5) @break @endif @endforeach</div></code></pre> </div> <p>You may also include the continuation or break condition within the directive declaration:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@foreach </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">as</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@continue</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">->type</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">==</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">li</span><span style="color: #89DDFF;">>{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">->name</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</</span><span style="color: #FF5572;">li</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@break</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">->number</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">==</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">5</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #C792EA;">@endforeach</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @foreach ($users as $user) @continue($user->type == 1) <li>{{ $user->name }}</li> @break($user->number == 5) @endforeach</div></code></pre> </div> <h3 id="the-loop-variable"><a href="#the-loop-variable">The Loop Variable</a></h3> <p>While iterating through a <code>foreach</code> loop, a <code>$loop</code> variable will be available inside of your loop. This variable provides access to some useful bits of information such as the current loop index and whether this is the first or last iteration through the loop:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #C792EA;">@foreach </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">as</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@if </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$loop</span><span style="color: #89DDFF;">->first</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #BFC7D5;"> This is the first iteration.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@endif</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@if </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$loop</span><span style="color: #89DDFF;">->last</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;"> This is the last iteration.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@endif</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">p</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">This is user </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">->id</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</</span><span style="color: #FF5572;">p</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #C792EA;">@endforeach</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @foreach ($users as $user) @if ($loop->first) This is the first iteration. @endif @if ($loop->last) This is the last iteration. @endif <p>This is user {{ $user->id }}</p> @endforeach</div></code></pre> </div> <p>If you are in a nested loop, you may access the parent loop's <code>$loop</code> variable via the <code>parent</code> property:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@foreach </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">as</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@foreach </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">->posts</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">as</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$post</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@if </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$loop</span><span style="color: #89DDFF;">->parent->first</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> This is the first iteration of the parent loop.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@endif</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@endforeach</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #C792EA;">@endforeach</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @foreach ($users as $user) @foreach ($user->posts as $post) @if ($loop->parent->first) This is the first iteration of the parent loop. @endif @endforeach @endforeach</div></code></pre> </div> <p>The <code>$loop</code> variable also contains a variety of other useful properties:</p> <div class="overflow-auto"> <table> <thead> <tr> <th>Property</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>$loop->index</code></td> <td>The index of the current loop iteration (starts at 0).</td> </tr> <tr> <td><code>$loop->iteration</code></td> <td>The current loop iteration (starts at 1).</td> </tr> <tr> <td><code>$loop->remaining</code></td> <td>The iterations remaining in the loop.</td> </tr> <tr> <td><code>$loop->count</code></td> <td>The total number of items in the array being iterated.</td> </tr> <tr> <td><code>$loop->first</code></td> <td>Whether this is the first iteration through the loop.</td> </tr> <tr> <td><code>$loop->last</code></td> <td>Whether this is the last iteration through the loop.</td> </tr> <tr> <td><code>$loop->even</code></td> <td>Whether this is an even iteration through the loop.</td> </tr> <tr> <td><code>$loop->odd</code></td> <td>Whether this is an odd iteration through the loop.</td> </tr> <tr> <td><code>$loop->depth</code></td> <td>The nesting level of the current loop.</td> </tr> <tr> <td><code>$loop->parent</code></td> <td>When in a nested loop, the parent's loop variable.</td> </tr> </tbody> </table> </div> <h3 id="conditional-classes"><a href="#conditional-classes">Conditional Classes & Styles</a></h3> <p>The <code>@class</code> directive conditionally compiles a CSS class string. The directive accepts an array of classes where the array key contains the class or classes you wish to add, while the value is a boolean expression. If the array element has a numeric key, it will always be included in the rendered class list:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #D3423E;">@php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$isActive</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">false</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$hasError</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">true</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #D3423E;">@endphp</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">span</span><span style="color: #89DDFF;"> </span><span style="color: #82AAFF;">@class</span><span style="color: #89DDFF;">(</span><span style="color: #BFC7D5;">[</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #89DDFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">p-4</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #89DDFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">font-bold</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;"> => </span><span style="color: #BEC5D4;">$isActive</span><span style="color: #89DDFF;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #89DDFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">text-gray-500</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;"> => </span><span style="color: #C792EA;">!</span><span style="color: #89DDFF;"> </span><span style="color: #BEC5D4;">$isActive</span><span style="color: #89DDFF;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #89DDFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">bg-red</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;"> => </span><span style="color: #BEC5D4;">$hasError</span><span style="color: #89DDFF;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;">]</span><span style="color: #89DDFF;">)></</span><span style="color: #FF5572;">span</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">span</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">p-4 text-gray-500 bg-red</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></</span><span style="color: #FF5572;">span</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @php $isActive = false; $hasError = true; @endphp <span @class([ 'p-4', 'font-bold' => $isActive, 'text-gray-500' => ! $isActive, 'bg-red' => $hasError, ])></span> <span class="p-4 text-gray-500 bg-red"></span></div></code></pre> </div> <p>Likewise, the <code>@style</code> directive may be used to conditionally add inline CSS styles to an HTML element:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #D3423E;">@php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$isActive</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">true</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #D3423E;">@endphp</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">span</span><span style="color: #89DDFF;"> </span><span style="color: #82AAFF;">@style</span><span style="color: #89DDFF;">(</span><span style="color: #BFC7D5;">[</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #89DDFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">background-color: red</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #89DDFF;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">font-weight: bold</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;"> => </span><span style="color: #BEC5D4;">$isActive</span><span style="color: #89DDFF;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;">]</span><span style="color: #89DDFF;">)></</span><span style="color: #FF5572;">span</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">span</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">style</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">background-color: red; font-weight: bold;</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></</span><span style="color: #FF5572;">span</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @php $isActive = true; @endphp <span @style([ 'background-color: red', 'font-weight: bold' => $isActive, ])></span> <span style="background-color: red; font-weight: bold;"></span></div></code></pre> </div> <h3 id="additional-attributes"><a href="#additional-attributes">Additional Attributes</a></h3> <p>For convenience, you may use the <code>@checked</code> directive to easily indicate if a given HTML checkbox input is "checked". This directive will echo <code>checked</code> if the provided condition evaluates to <code>true</code>:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">input</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">type</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">checkbox</span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">name</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">active</span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">value</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">active</span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #89DDFF;"> </span><span style="color: #82AAFF;">@checked</span><span style="color: #89DDFF;">(</span><span style="color: #82AAFF;">old</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">active</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">user</span><span style="color: #89DDFF;">->active</span><span style="color: #BFC7D5;">)</span><span style="color: #89DDFF;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #89DDFF;">/></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <input type="checkbox" name="active" value="active" @checked(old('active', $user->active)) /></div></code></pre> </div> <p>Likewise, the <code>@selected</code> directive may be used to indicate if a given select option should be "selected":</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">select</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">name</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">version</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@foreach </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$product</span><span style="color: #89DDFF;">->versions</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">as</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$version</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">option</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">value</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">{{</span><span style="color: #C3E88D;"> </span><span style="color: #BEC5D4;">$version</span><span style="color: #C3E88D;"> </span><span style="color: #89DDFF;">}}</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #82AAFF;">@selected</span><span style="color: #89DDFF;">(</span><span style="color: #82AAFF;">old</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">version</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span><span style="color: #89DDFF;"> </span><span style="color: #C792EA;">==</span><span style="color: #89DDFF;"> </span><span style="color: #BEC5D4;">$version</span><span style="color: #89DDFF;">)></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$version</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">option</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@endforeach</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">select</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <select name="version"> @foreach ($product->versions as $version) <option value="{{ $version }}" @selected(old('version') == $version)> {{ $version }} </option> @endforeach </select></div></code></pre> </div> <p>Additionally, the <code>@disabled</code> directive may be used to indicate if a given element should be "disabled":</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">button</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">type</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">submit</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #82AAFF;">@disabled</span><span style="color: #89DDFF;">(</span><span style="color: #BEC5D4;">$errors</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">isNotEmpty</span><span style="color: #BFC7D5;">()</span><span style="color: #89DDFF;">)></span><span style="color: #BFC7D5;">Submit</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">button</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <button type="submit" @disabled($errors->isNotEmpty())>Submit</button></div></code></pre> </div> <p>Moreover, the <code>@readonly</code> directive may be used to indicate if a given element should be "readonly":</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">input</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">type</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">email</span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">name</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">email</span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">value</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a7f777b73765a767b687b6c7f7634797577">[email protected]</a></span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #89DDFF;"> </span><span style="color: #82AAFF;">@readonly</span><span style="color: #89DDFF;">(</span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">isNotAdmin</span><span style="color: #BFC7D5;">()</span><span style="color: #89DDFF;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #89DDFF;">/></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <input type="email" name="email" value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88d85898184a884899a899e8d84c68b8785">[email protected]</a>" @readonly($user->isNotAdmin()) /></div></code></pre> </div> <p>In addition, the <code>@required</code> directive may be used to indicate if a given element should be "required":</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">input</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">type</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">text</span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">name</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">title</span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">value</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">title</span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #89DDFF;"> </span><span style="color: #82AAFF;">@required</span><span style="color: #89DDFF;">(</span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">isAdmin</span><span style="color: #BFC7D5;">()</span><span style="color: #89DDFF;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #89DDFF;">/></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <input type="text" name="title" value="title" @required($user->isAdmin()) /></div></code></pre> </div> <h3 id="including-subviews"><a href="#including-subviews">Including Subviews</a></h3> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:px-4 lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 lg:my-1.5 rounded-xs flex items-center justify-center shrink-0 bg-[#8D54C5]"> <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 20H11M5.5 14H10.5M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 10.7924 2.63505 13.2029 5 14.3264V17H11V14.3264C13.3649 13.2029 15 10.7924 15 8Z" stroke="#FDFDFC" stroke-width="1.5" stroke-linecap="square"/> </svg> </div> <p class="callout text-pretty"> While you're free to use the <code>@include</code> directive, Blade <a href="#components">components</a> provide similar functionality and offer several benefits over the <code>@include</code> directive such as data and attribute binding.</p> </div> <p>Blade's <code>@include</code> directive allows you to include a Blade view from within another view. All variables that are available to the parent view will be made available to the included view:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@include</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">shared.errors</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">form</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">form</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <div> @include('shared.errors') <form>  </form> </div></div></code></pre> </div> <p>Even though the included view will inherit all data available in the parent view, you may also pass an array of additional data that should be made available to the included view:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@include</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">view.name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, [</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">status</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">complete</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">])</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @include('view.name', ['status' => 'complete'])</div></code></pre> </div> <p>If you attempt to <code>@include</code> a view which does not exist, Laravel will throw an error. If you would like to include a view that may or may not be present, you should use the <code>@includeIf</code> directive:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@includeIf</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">view.name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, [</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">status</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">complete</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">])</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @includeIf('view.name', ['status' => 'complete'])</div></code></pre> </div> <p>If you would like to <code>@include</code> a view if a given boolean expression evaluates to <code>true</code> or <code>false</code>, you may use the <code>@includeWhen</code> and <code>@includeUnless</code> directives:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@includeWhen</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$boolean</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">view.name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, [</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">status</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">complete</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">])</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #82AAFF;">@includeUnless</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$boolean</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">view.name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, [</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">status</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">complete</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">])</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @includeWhen($boolean, 'view.name', ['status' => 'complete']) @includeUnless($boolean, 'view.name', ['status' => 'complete'])</div></code></pre> </div> <p>To include the first view that exists from a given array of views, you may use the <code>includeFirst</code> directive:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@includeFirst</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">custom.admin</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">admin</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">], [</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">status</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">complete</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">])</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @includeFirst(['custom.admin', 'admin'], ['status' => 'complete'])</div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:px-4 lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 lg:my-1.5 rounded-xs flex items-center justify-center shrink-0 bg-[#F53003]"> <svg width="2" height="18" viewBox="0 0 2 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 17V16.99M1 1V13" stroke="#FDFDFC" stroke-width="2" stroke-linecap="square"/> </svg> </div> <p class="callout text-pretty"> You should avoid using the <code>__DIR__</code> and <code>__FILE__</code> constants in your Blade views, since they will refer to the location of the cached, compiled view.</p> </div> <h4 id="rendering-views-for-collections"><a href="#rendering-views-for-collections">Rendering Views for Collections</a></h4> <p>You may combine loops and includes into one line with Blade's <code>@each</code> directive:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@each</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">view.name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$jobs</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">job</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @each('view.name', $jobs, 'job')</div></code></pre> </div> <p>The <code>@each</code> directive's first argument is the view to render for each element in the array or collection. The second argument is the array or collection you wish to iterate over, while the third argument is the variable name that will be assigned to the current iteration within the view. So, for example, if you are iterating over an array of <code>jobs</code>, typically you will want to access each job as a <code>job</code> variable within the view. The array key for the current iteration will be available as the <code>key</code> variable within the view.</p> <p>You may also pass a fourth argument to the <code>@each</code> directive. This argument determines the view that will be rendered if the given array is empty.</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@each</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">view.name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #BEC5D4;">$jobs</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">job</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">view.empty</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @each('view.name', $jobs, 'job', 'view.empty')</div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:px-4 lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 lg:my-1.5 rounded-xs flex items-center justify-center shrink-0 bg-[#F53003]"> <svg width="2" height="18" viewBox="0 0 2 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 17V16.99M1 1V13" stroke="#FDFDFC" stroke-width="2" stroke-linecap="square"/> </svg> </div> <p class="callout text-pretty"> Views rendered via <code>@each</code> do not inherit the variables from the parent view. If the child view requires these variables, you should use the <code>@foreach</code> and <code>@include</code> directives instead.</p> </div> <h3 id="the-once-directive"><a href="#the-once-directive">The <code>@once</code> Directive</a></h3> <p>The <code>@once</code> directive allows you to define a portion of the template that will only be evaluated once per rendering cycle. This may be useful for pushing a given piece of JavaScript into the page's header using <a href="#stacks">stacks</a>. For example, if you are rendering a given <a href="#components">component</a> within a loop, you may wish to only push the JavaScript to the header the first time the component is rendered:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@once</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@push</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">scripts</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">script</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> Your custom JavaScript...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">script</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@endpush</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #C792EA;">@endonce</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @once @push('scripts') <script> // Your custom JavaScript... </script> @endpush @endonce</div></code></pre> </div> <p>Since the <code>@once</code> directive is often used in conjunction with the <code>@push</code> or <code>@prepend</code> directives, the <code>@pushOnce</code> and <code>@prependOnce</code> directives are available for your convenience:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@pushOnce</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">scripts</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">script</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> Your custom JavaScript...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">script</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #C792EA;">@endPushOnce</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @pushOnce('scripts') <script> // Your custom JavaScript... </script> @endPushOnce</div></code></pre> </div> <h3 id="raw-php"><a href="#raw-php">Raw PHP</a></h3> <p>In some situations, it's useful to embed PHP code into your views. You can use the Blade <code>@php</code> directive to execute a block of plain PHP within your template:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #D3423E;">@php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$counter</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">1</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #D3423E;">@endphp</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @php $counter = 1; @endphp</div></code></pre> </div> <p>Or, if you only need to use PHP to import a class, you may use the <code>@use</code> directive:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #82AAFF;">@use</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">App\Models\Flight</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @use('App\Models\Flight')</div></code></pre> </div> <p>A second argument may be provided to the <code>@use</code> directive to alias the imported class:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;">@</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;">('App\Models\</span><span style="color: #FFCB8B;">Flight</span><span style="color: #BFC7D5;">', '</span><span style="color: #FFCB8B;">FlightModel</span><span style="color: #BFC7D5;">')</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @use('App\Models\Flight', 'FlightModel')</div></code></pre> </div> <h3 id="comments"><a href="#comments">Comments</a></h3> <p>Blade also allows you to define comments in your views. However, unlike HTML comments, Blade comments are not included in the HTML returned by your application:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">{{--</span><span style="color: #697098;"> This comment will not be present in the rendered HTML </span><span style="color: #697098;">--}}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> {{-- This comment will not be present in the rendered HTML --}}</div></code></pre> </div> <h2 id="components"><a href="#components">Components</a></h2> <p>Components and slots provide similar benefits to sections, layouts, and includes; however, some may find the mental model of components and slots easier to understand. There are two approaches to writing components: class based components and anonymous components.</p> <p>To create a class based component, you may use the <code>make:component</code> Artisan command. To illustrate how to use components, we will create a simple <code>Alert</code> component. The <code>make:component</code> command will place the component in the <code>app/View/Components</code> directory:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">make:component</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">Alert</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> php artisan make:component Alert</div></code></pre> </div> <p>The <code>make:component</code> command will also create a view template for the component. The view will be placed in the <code>resources/views/components</code> directory. When writing components for your own application, components are automatically discovered within the <code>app/View/Components</code> directory and <code>resources/views/components</code> directory, so no further component registration is typically required.</p> <p>You may also create components within subdirectories:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">make:component</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">Forms/Input</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> php artisan make:component Forms/Input</div></code></pre> </div> <p>The command above will create an <code>Input</code> component in the <code>app/View/Components/Forms</code> directory and the view will be placed in the <code>resources/views/components/forms</code> directory.</p> <p>If you would like to create an anonymous component (a component with only a Blade template and no class), you may use the <code>--view</code> flag when invoking the <code>make:component</code> command:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">make:component</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">forms.input</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">--view</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> php artisan make:component forms.input --view</div></code></pre> </div> <p>The command above will create a Blade file at <code>resources/views/components/forms/input.blade.php</code> which can be rendered as a component via <code><x-forms.input /></code>.</p> <h4 id="manually-registering-package-components"><a href="#manually-registering-package-components">Manually Registering Package Components</a></h4> <p>When writing components for your own application, components are automatically discovered within the <code>app/View/Components</code> directory and <code>resources/views/components</code> directory.</p> <p>However, if you are building a package that utilizes Blade components, you will need to manually register your component class and its HTML tag alias. You should typically register your components in the <code>boot</code> method of your package's service provider:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">Blade</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;"> * Bootstrap your package's services.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">boot</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Blade</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">component</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">package-alert</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #FFCB8B;">Alert</span><span style="color: #89DDFF;">::</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">9</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Illuminate\Support\Facades\Blade; /** * Bootstrap your package's services. */ public function boot(): void { Blade::component('package-alert', Alert::class); }</div></code></pre> </div> <p>Once your component has been registered, it may be rendered using its tag alias:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-package-alert</span><span style="color: #89DDFF;">/></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-package-alert/></div></code></pre> </div> <p>Alternatively, you may use the <code>componentNamespace</code> method to autoload component classes by convention. For example, a <code>Nightshade</code> package might have <code>Calendar</code> and <code>ColorPicker</code> components that reside within the <code>Package\Views\Components</code> namespace:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">Blade</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;"> * Bootstrap your package's services.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">boot</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Blade</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">componentNamespace</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Nightshade</span><span style="color: #F78C6C;">\\</span><span style="color: #C3E88D;">Views</span><span style="color: #F78C6C;">\\</span><span style="color: #C3E88D;">Components</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">nightshade</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">9</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Illuminate\Support\Facades\Blade; /** * Bootstrap your package's services. */ public function boot(): void { Blade::componentNamespace('Nightshade\\Views\\Components', 'nightshade'); }</div></code></pre> </div> <p>This will allow the usage of package components by their vendor namespace using the <code>package-name::</code> syntax:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">x-nightshade::calendar</span><span style="color: #89DDFF;"> /></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">x-nightshade::color-picker</span><span style="color: #89DDFF;"> /></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-nightshade::calendar /> <x-nightshade::color-picker /></div></code></pre> </div> <p>Blade will automatically detect the class that's linked to this component by pascal-casing the component name. Subdirectories are also supported using "dot" notation.</p> <h3 id="rendering-components"><a href="#rendering-components">Rendering Components</a></h3> <p>To display a component, you may use a Blade component tag within one of your Blade templates. Blade component tags start with the string <code>x-</code> followed by the kebab case name of the component class:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-alert</span><span style="color: #89DDFF;">/></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-user-profile</span><span style="color: #89DDFF;">/></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-alert/> <x-user-profile/></div></code></pre> </div> <p>If the component class is nested deeper within the <code>app/View/Components</code> directory, you may use the <code>.</code> character to indicate directory nesting. For example, if we assume a component is located at <code>app/View/Components/Inputs/Button.php</code>, we may render it like so:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-inputs.button</span><span style="color: #89DDFF;">/></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-inputs.button/></div></code></pre> </div> <p>If you would like to conditionally render your component, you may define a <code>shouldRender</code> method on your component class. If the <code>shouldRender</code> method returns <code>false</code> the component will not be rendered:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\</span><span style="color: #FFCB8B;">Str</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;"> * Whether the component should be rendered</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">shouldRender</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">bool</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Str</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">length</span><span style="color: #BFC7D5;">(</span><span style="color: #FF5572;">$this</span><span style="color: #89DDFF;">->message</span><span style="color: #BFC7D5;">) </span><span style="color: #C792EA;">></span><span style="color: #BFC7D5;"> </span><span style="color: #F78C6C;">0</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">9</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Illuminate\Support\Str; /** * Whether the component should be rendered */ public function shouldRender(): bool { return Str::length($this->message) > 0; }</div></code></pre> </div> <h3 id="index-components"><a href="#index-components">Index Components</a></h3> <p>Sometimes components are part of a component group and you may wish to group the related components within a single directory. For example, imagine a "card" component with the following class structure:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="text" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">App\Views\Components\Card\Card</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;">App\Views\Components\Card\Header</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;">App\Views\Components\Card\Body</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> App\Views\Components\Card\Card App\Views\Components\Card\Header App\Views\Components\Card\Body</div></code></pre> </div> <p>Since the root <code>Card</code> component is nested within a <code>Card</code> directory, you might expect that you would need to render the component via <code><x-card.card></code>. However, when a component's file name matches the name of the component's directory, Laravel automatically assumes that component is the "root" component and allows you to render the component without repeating the directory name:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-card</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-card.header</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">...</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-card.header</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-card.body</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">...</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-card.body</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-card</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-card> <x-card.header>...</x-card.header> <x-card.body>...</x-card.body> </x-card></div></code></pre> </div> <h3 id="passing-data-to-components"><a href="#passing-data-to-components">Passing Data to Components</a></h3> <p>You may pass data to Blade components using HTML attributes. Hard-coded, primitive values may be passed to the component using simple HTML attribute strings. PHP expressions and variables should be passed to the component via attributes that use the <code>:</code> character as a prefix:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-alert</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">type</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">error</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">:message</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">$message</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">/></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-alert type="error" :message="$message"/></div></code></pre> </div> <p>You should define all of the component's data attributes in its class constructor. All public properties on a component will automatically be made available to the component's view. It is not necessary to pass the data to the view from the component's <code>render</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #D3423E;"><?php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;">namespace</span><span style="color: #BFC7D5;"> App\View\Components;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\View\</span><span style="color: #FFCB8B;">Component</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\View\</span><span style="color: #FFCB8B;">View</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB6B;">Alert</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">extends</span><span style="color: #BFC7D5;"> </span><span style="color: #A9C77D;">Component</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #697098;"> * Create the component instance.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">__construct</span><span style="color: #D9F5DD;">(</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">string</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$type</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">string</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$message</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">18</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">19</span><span style="color: #697098;"> * Get the view / contents that represent the component.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">20</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">21</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">render</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">View</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">22</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">23</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">view</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">components.alert</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">24</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">25</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <?php namespace App\View\Components; use Illuminate\View\Component; use Illuminate\View\View; class Alert extends Component { /** * Create the component instance. */ public function __construct( public string $type, public string $message, ) {} /** * Get the view / contents that represent the component. */ public function render(): View { return view('components.alert'); } }</div></code></pre> </div> <p>When your component is rendered, you may display the contents of your component's public variables by echoing the variables by name:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">alert alert-</span><span style="color: #89DDFF;">{{</span><span style="color: #C3E88D;"> </span><span style="color: #BEC5D4;">$type</span><span style="color: #C3E88D;"> </span><span style="color: #89DDFF;">}}</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$message</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <div class="alert alert-{{ $type }}"> {{ $message }} </div></div></code></pre> </div> <h4 id="casing"><a href="#casing">Casing</a></h4> <p>Component constructor arguments should be specified using <code>camelCase</code>, while <code>kebab-case</code> should be used when referencing the argument names in your HTML attributes. For example, given the following component constructor:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #697098;"> * Create the component instance.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">__construct</span><span style="color: #D9F5DD;">(</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">string</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$alertType</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> /** * Create the component instance. */ public function __construct( public string $alertType, ) {}</div></code></pre> </div> <p>The <code>$alertType</code> argument may be provided to the component like so:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-alert</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">alert-type</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">danger</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> /></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-alert alert-type="danger" /></div></code></pre> </div> <h4 id="short-attribute-syntax"><a href="#short-attribute-syntax">Short Attribute Syntax</a></h4> <p>When passing attributes to components, you may also use a "short attribute" syntax. This is often convenient since attribute names frequently match the variable names they correspond to:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">{{--</span><span style="color: #697098;"> Short attribute syntax... </span><span style="color: #697098;">--}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-profile</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">:$userId</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">:$name</span><span style="color: #89DDFF;"> /></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;">{{--</span><span style="color: #697098;"> Is equivalent to... </span><span style="color: #697098;">--}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-profile</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">:user-id</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">$userId</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">:name</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">$name</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> /></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> {{-- Short attribute syntax... --}} <x-profile :$userId :$name /> {{-- Is equivalent to... --}} <x-profile :user-id="$userId" :name="$name" /></div></code></pre> </div> <h4 id="escaping-attribute-rendering"><a href="#escaping-attribute-rendering">Escaping Attribute Rendering</a></h4> <p>Since some JavaScript frameworks such as Alpine.js also use colon-prefixed attributes, you may use a double colon (<code>::</code>) prefix to inform Blade that the attribute is not a PHP expression. For example, given the following component:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-button</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">::class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">{ danger: isDeleting }</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> Submit</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-button</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-button ::class="{ danger: isDeleting }"> Submit </x-button></div></code></pre> </div> <p>The following HTML will be rendered by Blade:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">button</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">:class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">{ danger: isDeleting }</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> Submit</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">button</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <button :class="{ danger: isDeleting }"> Submit </button></div></code></pre> </div> <h4 id="component-methods"><a href="#component-methods">Component Methods</a></h4> <p>In addition to public variables being available to your component template, any public methods on the component may be invoked. For example, imagine a component that has an <code>isSelected</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #697098;"> * Determine if the given option is the currently selected option.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">isSelected</span><span style="color: #D9F5DD;">(</span><span style="color: #C792EA;">string</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$option</span><span style="color: #D9F5DD;">)</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">bool</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$option</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">===</span><span style="color: #BFC7D5;"> </span><span style="color: #FF5572;">$this</span><span style="color: #89DDFF;">->selected</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> /** * Determine if the given option is the currently selected option. */ public function isSelected(string $option): bool { return $option === $this->selected; }</div></code></pre> </div> <p>You may execute this method from your component template by invoking the variable matching the name of the method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">option</span><span style="color: #89DDFF;"> {{ </span><span style="color: #82AAFF;">$</span><span style="color: #BEC5D4;">isSelected</span><span style="color: #89DDFF;">(</span><span style="color: #BEC5D4;">$value</span><span style="color: #89DDFF;">) ? </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">selected</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;"> : </span><span style="color: #D9F5DD;">''</span><span style="color: #89DDFF;"> }} </span><span style="color: #FFCB6B;">value</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">{{</span><span style="color: #C3E88D;"> </span><span style="color: #BEC5D4;">$value</span><span style="color: #C3E88D;"> </span><span style="color: #89DDFF;">}}</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$label</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">option</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <option {{ $isSelected($value) ? 'selected' : '' }} value="{{ $value }}"> {{ $label }} </option></div></code></pre> </div> <h4 id="using-attributes-slots-within-component-class"><a href="#using-attributes-slots-within-component-class">Accessing Attributes and Slots Within Component Classes</a></h4> <p>Blade components also allow you to access the component name, attributes, and slot inside the class's render method. However, in order to access this data, you should return a closure from your component's <code>render</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Closure</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #697098;"> * Get the view / contents that represent the component.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">render</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Closure</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">()</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;"><div {{ $attributes }}>Components content</div></span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> };</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Closure; /** * Get the view / contents that represent the component. */ public function render(): Closure { return function () { return '<div {{ $attributes }}>Components content</div>'; }; }</div></code></pre> </div> <p>The closure returned by your component's <code>render</code> method may also receive a <code>$data</code> array as its only argument. This array will contain several elements that provide information about the component:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #C792EA;">array</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$data</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> $data['componentName'];</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> $data['attributes'];</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> $data['slot'];</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;"><div {{ $attributes }}>Components content</div></span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> return function (array $data) { // $data['componentName']; // $data['attributes']; // $data['slot']; return '<div {{ $attributes }}>Components content</div>'; }</div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:px-4 lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 lg:my-1.5 rounded-xs flex items-center justify-center shrink-0 bg-[#F53003]"> <svg width="2" height="18" viewBox="0 0 2 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 17V16.99M1 1V13" stroke="#FDFDFC" stroke-width="2" stroke-linecap="square"/> </svg> </div> <p class="callout text-pretty"> The elements in the <code>$data</code> array should never be directly embedded into the Blade string returned by your <code>render</code> method, as doing so could allow remote code execution via malicious attribute content.</p> </div> <p>The <code>componentName</code> is equal to the name used in the HTML tag after the <code>x-</code> prefix. So <code><x-alert /></code>'s <code>componentName</code> will be <code>alert</code>. The <code>attributes</code> element will contain all of the attributes that were present on the HTML tag. The <code>slot</code> element is an <code>Illuminate\Support\HtmlString</code> instance with the contents of the component's slot.</p> <p>The closure should return a string. If the returned string corresponds to an existing view, that view will be rendered; otherwise, the returned string will be evaluated as an inline Blade view.</p> <h4 id="additional-dependencies"><a href="#additional-dependencies">Additional Dependencies</a></h4> <p>If your component requires dependencies from Laravel's <a href="/docs/12.x/container">service container</a>, you may list them before any of the component's data attributes and they will automatically be injected by the container:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> App\Services\</span><span style="color: #FFCB8B;">AlertCreator</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #697098;"> * Create the component instance.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">__construct</span><span style="color: #D9F5DD;">(</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">AlertCreator</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$creator</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">string</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$type</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">string</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$message</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use App\Services\AlertCreator; /** * Create the component instance. */ public function __construct( public AlertCreator $creator, public string $type, public string $message, ) {}</div></code></pre> </div> <h4 id="hiding-attributes-and-methods"><a href="#hiding-attributes-and-methods">Hiding Attributes / Methods</a></h4> <p>If you would like to prevent some public methods or properties from being exposed as variables to your component template, you may add them to an <code>$except</code> array property on your component:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #D3423E;"><?php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;">namespace</span><span style="color: #BFC7D5;"> App\View\Components;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\View\</span><span style="color: #FFCB8B;">Component</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB6B;">Alert</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">extends</span><span style="color: #BFC7D5;"> </span><span style="color: #A9C77D;">Component</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #697098;"> * The properties / methods that should not be exposed to the component template.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #697098;"> *</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #697098;"> * </span><span style="color: #C792EA;">@var</span><span style="color: #697098;"> </span><span style="color: #C792EA;">array</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">protected</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$except</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">=</span><span style="color: #BFC7D5;"> [</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">type</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">];</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span><span style="color: #697098;"> * Create the component instance.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">18</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">19</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">__construct</span><span style="color: #D9F5DD;">(</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">20</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">string</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$type</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">21</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">22</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <?php namespace App\View\Components; use Illuminate\View\Component; class Alert extends Component { /** * The properties / methods that should not be exposed to the component template. * * @var array */ protected $except = ['type']; /** * Create the component instance. */ public function __construct( public string $type, ) {} }</div></code></pre> </div> <h3 id="component-attributes"><a href="#component-attributes">Component Attributes</a></h3> <p>We've already examined how to pass data attributes to a component; however, sometimes you may need to specify additional HTML attributes, such as <code>class</code>, that are not part of the data required for a component to function. Typically, you want to pass these additional attributes down to the root element of the component template. For example, imagine we want to render an <code>alert</code> component like so:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-alert</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">type</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">error</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">:message</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">$message</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">mt-4</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">/></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-alert type="error" :message="$message" class="mt-4"/></div></code></pre> </div> <p>All of the attributes that are not part of the component's constructor will automatically be added to the component's "attribute bag". This attribute bag is automatically made available to the component via the <code>$attributes</code> variable. All of the attributes may be rendered within the component by echoing this variable:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> {{ </span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;"> }}></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <div {{ $attributes }}>  </div></div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:px-4 lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 lg:my-1.5 rounded-xs flex items-center justify-center shrink-0 bg-[#F53003]"> <svg width="2" height="18" viewBox="0 0 2 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 17V16.99M1 1V13" stroke="#FDFDFC" stroke-width="2" stroke-linecap="square"/> </svg> </div> <p class="callout text-pretty"> Using directives such as <code>@env</code> within component tags is not supported at this time. For example, <code><x-alert :live="@env('production')"/></code> will not be compiled.</p> </div> <h4 id="default-merged-attributes"><a href="#default-merged-attributes">Default / Merged Attributes</a></h4> <p>Sometimes you may need to specify default values for attributes or merge additional values into some of the component's attributes. To accomplish this, you may use the attribute bag's <code>merge</code> method. This method is particularly useful for defining a set of default CSS classes that should always be applied to a component:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> {{ </span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">merge</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">class</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;"> => </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">alert alert-</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;">.</span><span style="color: #BEC5D4;">$type</span><span style="color: #BFC7D5;">])</span><span style="color: #89DDFF;"> }}></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$message</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}> {{ $message }} </div></div></code></pre> </div> <p>If we assume this component is utilized like so:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-alert</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">type</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">error</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">:message</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">$message</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">mb-4</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">/></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-alert type="error" :message="$message" class="mb-4"/></div></code></pre> </div> <p>The final, rendered HTML of the component will appear like the following:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">alert alert-error mb-4</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <div class="alert alert-error mb-4">  </div></div></code></pre> </div> <h4 id="conditionally-merge-classes"><a href="#conditionally-merge-classes">Conditionally Merge Classes</a></h4> <p>Sometimes you may wish to merge classes if a given condition is <code>true</code>. You can accomplish this via the <code>class</code> method, which accepts an array of classes where the array key contains the class or classes you wish to add, while the value is a boolean expression. If the array element has a numeric key, it will always be included in the rendered class list:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> {{ </span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">class</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">p-4</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">bg-red</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;"> => </span><span style="color: #BEC5D4;">$hasError</span><span style="color: #BFC7D5;">])</span><span style="color: #89DDFF;"> }}></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$message</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <div {{ $attributes->class(['p-4', 'bg-red' => $hasError]) }}> {{ $message }} </div></div></code></pre> </div> <p>If you need to merge other attributes onto your component, you can chain the <code>merge</code> method onto the <code>class</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">button</span><span style="color: #89DDFF;"> {{ </span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">class</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">p-4</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">])</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">merge</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">type</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;"> => </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">button</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">])</span><span style="color: #89DDFF;"> }}></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$slot</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">button</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <button {{ $attributes->class(['p-4'])->merge(['type' => 'button']) }}> {{ $slot }} </button></div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:px-4 lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 lg:my-1.5 rounded-xs flex items-center justify-center shrink-0 bg-[#8D54C5]"> <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 20H11M5.5 14H10.5M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 10.7924 2.63505 13.2029 5 14.3264V17H11V14.3264C13.3649 13.2029 15 10.7924 15 8Z" stroke="#FDFDFC" stroke-width="1.5" stroke-linecap="square"/> </svg> </div> <p class="callout text-pretty"> If you need to conditionally compile classes on other HTML elements that shouldn't receive merged attributes, you can use the <a href="#conditional-classes">@class directive</a>.</p> </div> <h4 id="non-class-attribute-merging"><a href="#non-class-attribute-merging">Non-Class Attribute Merging</a></h4> <p>When merging attributes that are not <code>class</code> attributes, the values provided to the <code>merge</code> method will be considered the "default" values of the attribute. However, unlike the <code>class</code> attribute, these attributes will not be merged with injected attribute values. Instead, they will be overwritten. For example, a <code>button</code> component's implementation may look like the following:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">button</span><span style="color: #89DDFF;"> {{ </span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">merge</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">type</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;"> => </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">button</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">])</span><span style="color: #89DDFF;"> }}></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$slot</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">button</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <button {{ $attributes->merge(['type' => 'button']) }}> {{ $slot }} </button></div></code></pre> </div> <p>To render the button component with a custom <code>type</code>, it may be specified when consuming the component. If no type is specified, the <code>button</code> type will be used:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-button</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">type</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">submit</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> Submit</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-button</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-button type="submit"> Submit </x-button></div></code></pre> </div> <p>The rendered HTML of the <code>button</code> component in this example would be:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">button</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">type</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">submit</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> Submit</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">button</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <button type="submit"> Submit </button></div></code></pre> </div> <p>If you would like an attribute other than <code>class</code> to have its default value and injected values joined together, you may use the <code>prepends</code> method. In this example, the <code>data-controller</code> attribute will always begin with <code>profile-controller</code> and any additional injected <code>data-controller</code> values will be placed after this default value:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> {{ </span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">merge</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">data-controller</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;"> => </span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">prepends</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">profile-controller</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)])</span><span style="color: #89DDFF;"> }}></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$slot</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <div {{ $attributes->merge(['data-controller' => $attributes->prepends('profile-controller')]) }}> {{ $slot }} </div></div></code></pre> </div> <h4 id="filtering-attributes"><a href="#filtering-attributes">Retrieving and Filtering Attributes</a></h4> <p>You may filter attributes using the <code>filter</code> method. This method accepts a closure which should return <code>true</code> if you wish to retain the attribute in the attribute bag:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">filter</span><span style="color: #BFC7D5;">(</span><span style="color: #82AAFF;">fn </span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">string</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">value</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #C792EA;">string</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">key</span><span style="color: #BFC7D5;">) </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$key</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">==</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">foo</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">) </span><span style="color: #89DDFF;">}}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> {{ $attributes->filter(fn (string $value, string $key) => $key == 'foo') }}</div></code></pre> </div> <p>For convenience, you may use the <code>whereStartsWith</code> method to retrieve all attributes whose keys begin with a given string:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">whereStartsWith</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">wire:model</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">) </span><span style="color: #89DDFF;">}}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> {{ $attributes->whereStartsWith('wire:model') }}</div></code></pre> </div> <p>Conversely, the <code>whereDoesntStartWith</code> method may be used to exclude all attributes whose keys begin with a given string:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">whereDoesntStartWith</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">wire:model</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">) </span><span style="color: #89DDFF;">}}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> {{ $attributes->whereDoesntStartWith('wire:model') }}</div></code></pre> </div> <p>Using the <code>first</code> method, you may render the first attribute in a given attribute bag:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">whereStartsWith</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">wire:model</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">first</span><span style="color: #BFC7D5;">() </span><span style="color: #89DDFF;">}}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> {{ $attributes->whereStartsWith('wire:model')->first() }}</div></code></pre> </div> <p>If you would like to check if an attribute is present on the component, you may use the <code>has</code> method. This method accepts the attribute name as its only argument and returns a boolean indicating whether or not the attribute is present:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@if </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">has</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">class</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">))</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">Class attribute is present</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #C792EA;">@endif</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @if ($attributes->has('class')) <div>Class attribute is present</div> @endif</div></code></pre> </div> <p>If an array is passed to the <code>has</code> method, the method will determine if all of the given attributes are present on the component:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@if </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">has</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">class</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">]))</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">All of the attributes are present</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #C792EA;">@endif</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @if ($attributes->has(['name', 'class'])) <div>All of the attributes are present</div> @endif</div></code></pre> </div> <p>The <code>hasAny</code> method may be used to determine if any of the given attributes are present on the component:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@if </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">hasAny</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">href</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">:href</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">v-bind:href</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">]))</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">One of the attributes is present</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #C792EA;">@endif</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @if ($attributes->hasAny(['href', ':href', 'v-bind:href'])) <div>One of the attributes is present</div> @endif</div></code></pre> </div> <p>You may retrieve a specific attribute's value using the <code>get</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">get</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">class</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">) </span><span style="color: #89DDFF;">}}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> {{ $attributes->get('class') }}</div></code></pre> </div> <p>The <code>only</code> method may be used to retrieve only the attributes with the given keys:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">only</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">class</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">]) </span><span style="color: #89DDFF;">}}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> {{ $attributes->only(['class']) }}</div></code></pre> </div> <p>The <code>except</code> method may be used to retrieve all attributes except those with the given keys:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">except</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">class</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">]) </span><span style="color: #89DDFF;">}}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> {{ $attributes->except(['class']) }}</div></code></pre> </div> <h3 id="reserved-keywords"><a href="#reserved-keywords">Reserved Keywords</a></h3> <p>By default, some keywords are reserved for Blade's internal use in order to render components. The following keywords cannot be defined as public properties or method names within your components:</p> <div class="content-list" markdown="1"> <ul> <li><code>data</code></li> <li><code>render</code></li> <li><code>resolveView</code></li> <li><code>shouldRender</code></li> <li><code>view</code></li> <li><code>withAttributes</code></li> <li><code>withName</code></li> </ul> </div> <h3 id="slots"><a href="#slots">Slots</a></h3> <p>You will often need to pass additional content to your component via "slots". Component slots are rendered by echoing the <code>$slot</code> variable. To explore this concept, let's imagine that an <code>alert</code> component has the following markup:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">alert alert-danger</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$slot</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'>  <div class="alert alert-danger"> {{ $slot }} </div></div></code></pre> </div> <p>We may pass content to the <code>slot</code> by injecting content into the component:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-alert</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">strong</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">Whoops!</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">strong</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;"> Something went wrong!</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-alert</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-alert> <strong>Whoops!</strong> Something went wrong! </x-alert></div></code></pre> </div> <p>Sometimes a component may need to render multiple different slots in different locations within the component. Let's modify our alert component to allow for the injection of a "title" slot:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">span</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">alert-title</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">>{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$title</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</</span><span style="color: #FF5572;">span</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">alert alert-danger</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$slot</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'>  <span class="alert-title">{{ $title }}</span> <div class="alert alert-danger"> {{ $slot }} </div></div></code></pre> </div> <p>You may define the content of the named slot using the <code>x-slot</code> tag. Any content not within an explicit <code>x-slot</code> tag will be passed to the component in the <code>$slot</code> variable:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="xml" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-alert</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-slot:title</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> Server Error</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-slot</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">strong</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">Whoops!</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">strong</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;"> Something went wrong!</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-alert</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-alert> <x-slot:title> Server Error </x-slot> <strong>Whoops!</strong> Something went wrong! </x-alert></div></code></pre> </div> <p>You may invoke a slot's <code>isEmpty</code> method to determine if the slot contains content:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">span</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">alert-title</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">>{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$title</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</</span><span style="color: #FF5572;">span</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">alert alert-danger</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@if </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$slot</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">isEmpty</span><span style="color: #BFC7D5;">())</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> This is default content if the slot is empty.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@else</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$slot</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@endif</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">9</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <span class="alert-title">{{ $title }}</span> <div class="alert alert-danger"> @if ($slot->isEmpty()) This is default content if the slot is empty. @else {{ $slot }} @endif </div></div></code></pre> </div> <p>Additionally, the <code>hasActualContent</code> method may be used to determine if the slot contains any "actual" content that is not an HTML comment:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@if </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$slot</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">hasActualContent</span><span style="color: #BFC7D5;">())</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> The scope has non-comment content.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #C792EA;">@endif</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @if ($slot->hasActualContent()) The scope has non-comment content. @endif</div></code></pre> </div> <h4 id="scoped-slots"><a href="#scoped-slots">Scoped Slots</a></h4> <p>If you have used a JavaScript framework such as Vue, you may be familiar with "scoped slots", which allow you to access data or methods from the component within your slot. You may achieve similar behavior in Laravel by defining public methods or properties on your component and accessing the component within your slot via the <code>$component</code> variable. In this example, we will assume that the <code>x-alert</code> component has a public <code>formatAlert</code> method defined on its component class:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-alert</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">x-slot:title</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$component</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">formatAlert</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Server Error</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">) </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-slot</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">strong</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">Whoops!</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">strong</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;"> Something went wrong!</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-alert</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-alert> <x-slot:title> {{ $component->formatAlert('Server Error') }} </x-slot> <strong>Whoops!</strong> Something went wrong! </x-alert></div></code></pre> </div> <h4 id="slot-attributes"><a href="#slot-attributes">Slot Attributes</a></h4> <p>Like Blade components, you may assign additional <a href="#component-attributes">attributes</a> to slots such as CSS class names:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="xml" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-card</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">shadow-sm</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-slot:heading</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">font-bold</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #BFC7D5;"> Heading</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-slot</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> Content</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-slot:footer</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">text-sm</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> Footer</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-slot</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-card</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-card class="shadow-sm"> <x-slot:heading class="font-bold"> Heading </x-slot> Content <x-slot:footer class="text-sm"> Footer </x-slot> </x-card></div></code></pre> </div> <p>To interact with slot attributes, you may access the <code>attributes</code> property of the slot's variable. For more information on how to interact with attributes, please consult the documentation on <a href="#component-attributes">component attributes</a>:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #82AAFF;">@props</span><span style="color: #BFC7D5;">([</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">heading</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">footer</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #BFC7D5;">])</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> {{ </span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">class</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">border</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">])</span><span style="color: #89DDFF;"> }}></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">h1</span><span style="color: #89DDFF;"> {{ </span><span style="color: #BEC5D4;">$heading</span><span style="color: #89DDFF;">->attributes-></span><span style="color: #82AAFF;">class</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">text-lg</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">])</span><span style="color: #89DDFF;"> }}></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$heading</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">h1</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$slot</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">footer</span><span style="color: #89DDFF;"> {{ </span><span style="color: #BEC5D4;">$footer</span><span style="color: #89DDFF;">->attributes-></span><span style="color: #82AAFF;">class</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">text-gray-700</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">])</span><span style="color: #89DDFF;"> }}></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$footer</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">footer</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @props([ 'heading', 'footer', ]) <div {{ $attributes->class(['border']) }}> <h1 {{ $heading->attributes->class(['text-lg']) }}> {{ $heading }} </h1> {{ $slot }} <footer {{ $footer->attributes->class(['text-gray-700']) }}> {{ $footer }} </footer> </div></div></code></pre> </div> <h3 id="inline-component-views"><a href="#inline-component-views">Inline Component Views</a></h3> <p>For very small components, it may feel cumbersome to manage both the component class and the component's view template. For this reason, you may return the component's markup directly from the <code>render</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #697098;"> * Get the view / contents that represent the component.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">render</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">string</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;"><<<</span><span style="color: #BFC7D5;">'</span><span style="color: #89DDFF;">blade</span><span style="color: #BFC7D5;">'</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;"> <div class="alert alert-danger"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> {{ $slot }}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </div></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">blade</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> /** * Get the view / contents that represent the component. */ public function render(): string { return <<<'blade' <div class="alert alert-danger"> {{ $slot }} </div> blade; }</div></code></pre> </div> <h4 id="generating-inline-view-components"><a href="#generating-inline-view-components">Generating Inline View Components</a></h4> <p>To create a component that renders an inline view, you may use the <code>inline</code> option when executing the <code>make:component</code> command:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">make:component</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">Alert</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">--inline</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> php artisan make:component Alert --inline</div></code></pre> </div> <h3 id="dynamic-components"><a href="#dynamic-components">Dynamic Components</a></h3> <p>Sometimes you may need to render a component but not know which component should be rendered until runtime. In this situation, you may use Laravel's built-in <code>dynamic-component</code> component to render the component based on a runtime value or variable:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">// $componentName = "secondary-button";</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-dynamic-component</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">:component</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">$componentName</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">mt-4</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> /></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> // $componentName = "secondary-button"; <x-dynamic-component :component="$componentName" class="mt-4" /></div></code></pre> </div> <h3 id="manually-registering-components"><a href="#manually-registering-components">Manually Registering Components</a></h3> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:px-4 lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 lg:my-1.5 rounded-xs flex items-center justify-center shrink-0 bg-[#F53003]"> <svg width="2" height="18" viewBox="0 0 2 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 17V16.99M1 1V13" stroke="#FDFDFC" stroke-width="2" stroke-linecap="square"/> </svg> </div> <p class="callout text-pretty"> The following documentation on manually registering components is primarily applicable to those who are writing Laravel packages that include view components. If you are not writing a package, this portion of the component documentation may not be relevant to you.</p> </div> <p>When writing components for your own application, components are automatically discovered within the <code>app/View/Components</code> directory and <code>resources/views/components</code> directory.</p> <p>However, if you are building a package that utilizes Blade components or placing components in non-conventional directories, you will need to manually register your component class and its HTML tag alias so that Laravel knows where to find the component. You should typically register your components in the <code>boot</code> method of your package's service provider:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">Blade</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> VendorPackage\View\Components\</span><span style="color: #FFCB8B;">AlertComponent</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #697098;"> * Bootstrap your package's services.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">boot</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Blade</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">component</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">package-alert</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #FFCB8B;">AlertComponent</span><span style="color: #89DDFF;">::</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Illuminate\Support\Facades\Blade; use VendorPackage\View\Components\AlertComponent; /** * Bootstrap your package's services. */ public function boot(): void { Blade::component('package-alert', AlertComponent::class); }</div></code></pre> </div> <p>Once your component has been registered, it may be rendered using its tag alias:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-package-alert</span><span style="color: #89DDFF;">/></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-package-alert/></div></code></pre> </div> <h4>Autoloading Package Components</h4> <p>Alternatively, you may use the <code>componentNamespace</code> method to autoload component classes by convention. For example, a <code>Nightshade</code> package might have <code>Calendar</code> and <code>ColorPicker</code> components that reside within the <code>Package\Views\Components</code> namespace:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">Blade</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #697098;"> * Bootstrap your package's services.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">boot</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Blade</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">componentNamespace</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Nightshade</span><span style="color: #F78C6C;">\\</span><span style="color: #C3E88D;">Views</span><span style="color: #F78C6C;">\\</span><span style="color: #C3E88D;">Components</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">nightshade</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">9</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Illuminate\Support\Facades\Blade; /** * Bootstrap your package's services. */ public function boot(): void { Blade::componentNamespace('Nightshade\\Views\\Components', 'nightshade'); }</div></code></pre> </div> <p>This will allow the usage of package components by their vendor namespace using the <code>package-name::</code> syntax:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">x-nightshade::calendar</span><span style="color: #89DDFF;"> /></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">x-nightshade::color-picker</span><span style="color: #89DDFF;"> /></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-nightshade::calendar /> <x-nightshade::color-picker /></div></code></pre> </div> <p>Blade will automatically detect the class that's linked to this component by pascal-casing the component name. Subdirectories are also supported using "dot" notation.</p> <h2 id="anonymous-components"><a href="#anonymous-components">Anonymous Components</a></h2> <p>Similar to inline components, anonymous components provide a mechanism for managing a component via a single file. However, anonymous components utilize a single view file and have no associated class. To define an anonymous component, you only need to place a Blade template within your <code>resources/views/components</code> directory. For example, assuming you have defined a component at <code>resources/views/components/alert.blade.php</code>, you may simply render it like so:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-alert</span><span style="color: #89DDFF;">/></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-alert/></div></code></pre> </div> <p>You may use the <code>.</code> character to indicate if a component is nested deeper inside the <code>components</code> directory. For example, assuming the component is defined at <code>resources/views/components/inputs/button.blade.php</code>, you may render it like so:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-inputs.button</span><span style="color: #89DDFF;">/></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-inputs.button/></div></code></pre> </div> <h3 id="anonymous-index-components"><a href="#anonymous-index-components">Anonymous Index Components</a></h3> <p>Sometimes, when a component is made up of many Blade templates, you may wish to group the given component's templates within a single directory. For example, imagine an "accordion" component with the following directory structure:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="text" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">/resources/views/components/accordion.blade.php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;">/resources/views/components/accordion/item.blade.php</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> /resources/views/components/accordion.blade.php /resources/views/components/accordion/item.blade.php</div></code></pre> </div> <p>This directory structure allows you to render the accordion component and its item like so:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-accordion</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-accordion.item</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-accordion.item</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-accordion</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-accordion> <x-accordion.item> ... </x-accordion.item> </x-accordion></div></code></pre> </div> <p>However, in order to render the accordion component via <code>x-accordion</code>, we were forced to place the "index" accordion component template in the <code>resources/views/components</code> directory instead of nesting it within the <code>accordion</code> directory with the other accordion related templates.</p> <p>Thankfully, Blade allows you to place a file matching the component's directory name within the component's directory itself. When this template exists, it can be rendered as the "root" element of the component even though it is nested within a directory. So, we can continue to use the same Blade syntax given in the example above; however, we will adjust our directory structure like so:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="text" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">/resources/views/components/accordion/accordion.blade.php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;">/resources/views/components/accordion/item.blade.php</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> /resources/views/components/accordion/accordion.blade.php /resources/views/components/accordion/item.blade.php</div></code></pre> </div> <h3 id="data-properties-attributes"><a href="#data-properties-attributes">Data Properties / Attributes</a></h3> <p>Since anonymous components do not have any associated class, you may wonder how you may differentiate which data should be passed to the component as variables and which attributes should be placed in the component's <a href="#component-attributes">attribute bag</a>.</p> <p>You may specify which attributes should be considered data variables using the <code>@props</code> directive at the top of your component's Blade template. All other attributes on the component will be available via the component's attribute bag. If you wish to give a data variable a default value, you may specify the variable's name as the array key and the default value as the array value:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #82AAFF;">@props</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">type</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">info</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">message</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">])</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> {{ </span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">merge</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">class</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;"> => </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">alert alert-</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;">.</span><span style="color: #BEC5D4;">$type</span><span style="color: #BFC7D5;">])</span><span style="color: #89DDFF;"> }}></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$message</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'>  @props(['type' => 'info', 'message']) <div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}> {{ $message }} </div></div></code></pre> </div> <p>Given the component definition above, we may render the component like so:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-alert</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">type</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">error</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">:message</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">$message</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">mb-4</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">/></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-alert type="error" :message="$message" class="mb-4"/></div></code></pre> </div> <h3 id="accessing-parent-data"><a href="#accessing-parent-data">Accessing Parent Data</a></h3> <p>Sometimes you may want to access data from a parent component inside a child component. In these cases, you may use the <code>@aware</code> directive. For example, imagine we are building a complex menu component consisting of a parent <code><x-menu></code> and child <code><x-menu.item></code>:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-menu</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">color</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">purple</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-menu.item</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">...</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-menu.item</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-menu.item</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">...</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-menu.item</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-menu</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-menu color="purple"> <x-menu.item>...</x-menu.item> <x-menu.item>...</x-menu.item> </x-menu></div></code></pre> </div> <p>The <code><x-menu></code> component may have an implementation like the following:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #82AAFF;">@props</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">color</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">gray</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">])</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">ul</span><span style="color: #89DDFF;"> {{ </span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">merge</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">class</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;"> => </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">bg-</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;">.</span><span style="color: #BEC5D4;">$color</span><span style="color: #89DDFF;">.</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">-200</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">])</span><span style="color: #89DDFF;"> }}></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$slot</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">ul</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'>  @props(['color' => 'gray']) <ul {{ $attributes->merge(['class' => 'bg-'.$color.'-200']) }}> {{ $slot }} </ul></div></code></pre> </div> <p>Because the <code>color</code> prop was only passed into the parent (<code><x-menu></code>), it won't be available inside <code><x-menu.item></code>. However, if we use the <code>@aware</code> directive, we can make it available inside <code><x-menu.item></code> as well:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #82AAFF;">@aware</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">color</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">gray</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">])</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">li</span><span style="color: #89DDFF;"> {{ </span><span style="color: #BEC5D4;">$attributes</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">merge</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">class</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;"> => </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">text-</span><span style="color: #D9F5DD;">'</span><span style="color: #89DDFF;">.</span><span style="color: #BEC5D4;">$color</span><span style="color: #89DDFF;">.</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">-800</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">])</span><span style="color: #89DDFF;"> }}></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$slot</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">li</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'>  @aware(['color' => 'gray']) <li {{ $attributes->merge(['class' => 'text-'.$color.'-800']) }}> {{ $slot }} </li></div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:px-4 lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 lg:my-1.5 rounded-xs flex items-center justify-center shrink-0 bg-[#F53003]"> <svg width="2" height="18" viewBox="0 0 2 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 17V16.99M1 1V13" stroke="#FDFDFC" stroke-width="2" stroke-linecap="square"/> </svg> </div> <p class="callout text-pretty"> The <code>@aware</code> directive cannot access parent data that is not explicitly passed to the parent component via HTML attributes. Default <code>@props</code> values that are not explicitly passed to the parent component cannot be accessed by the <code>@aware</code> directive.</p> </div> <h3 id="anonymous-component-paths"><a href="#anonymous-component-paths">Anonymous Component Paths</a></h3> <p>As previously discussed, anonymous components are typically defined by placing a Blade template within your <code>resources/views/components</code> directory. However, you may occasionally want to register other anonymous component paths with Laravel in addition to the default path.</p> <p>The <code>anonymousComponentPath</code> method accepts the "path" to the anonymous component location as its first argument and an optional "namespace" that components should be placed under as its second argument. Typically, this method should be called from the <code>boot</code> method of one of your application's <a href="/docs/12.x/providers">service providers</a>:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #697098;"> * Bootstrap any application services.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">boot</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Blade</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">anonymousComponentPath</span><span style="color: #BFC7D5;">(</span><span style="color: #82AAFF;">__DIR__</span><span style="color: #89DDFF;">.</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/../components</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> /** * Bootstrap any application services. */ public function boot(): void { Blade::anonymousComponentPath(__DIR__.'/../components'); }</div></code></pre> </div> <p>When component paths are registered without a specified prefix as in the example above, they may be rendered in your Blade components without a corresponding prefix as well. For example, if a <code>panel.blade.php</code> component exists in the path registered above, it may be rendered like so:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-panel</span><span style="color: #89DDFF;"> /></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-panel /></div></code></pre> </div> <p>Prefix "namespaces" may be provided as the second argument to the <code>anonymousComponentPath</code> method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #FFCB8B;">Blade</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">anonymousComponentPath</span><span style="color: #BFC7D5;">(</span><span style="color: #82AAFF;">__DIR__</span><span style="color: #89DDFF;">.</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/../components</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">dashboard</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> Blade::anonymousComponentPath(__DIR__.'/../components', 'dashboard');</div></code></pre> </div> <p>When a prefix is provided, components within that "namespace" may be rendered by prefixing to the component's namespace to the component name when the component is rendered:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">x-dashboard::panel</span><span style="color: #89DDFF;"> /></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <x-dashboard::panel /></div></code></pre> </div> <h2 id="building-layouts"><a href="#building-layouts">Building Layouts</a></h2> <h3 id="layouts-using-components"><a href="#layouts-using-components">Layouts Using Components</a></h3> <p>Most web applications maintain the same general layout across various pages. It would be incredibly cumbersome and hard to maintain our application if we had to repeat the entire layout HTML in every view we create. Thankfully, it's convenient to define this layout as a single <a href="#components">Blade component</a> and then use it throughout our application.</p> <h4 id="defining-the-layout-component"><a href="#defining-the-layout-component">Defining the Layout Component</a></h4> <p>For example, imagine we are building a "todo" list application. We might define a <code>layout</code> component that looks like the following:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">html</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">head</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">title</span><span style="color: #89DDFF;">>{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$title</span><span style="color: #BFC7D5;"> ?? </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Todo Manager</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</</span><span style="color: #FF5572;">title</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">head</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">body</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">h1</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">Todos</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">h1</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">hr</span><span style="color: #89DDFF;">/></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$slot</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">body</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">html</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'>  <html> <head> <title>{{ $title ?? 'Todo Manager' }}</title> </head> <body> <h1>Todos</h1> <hr/> {{ $slot }} </body> </html></div></code></pre> </div> <h4 id="applying-the-layout-component"><a href="#applying-the-layout-component">Applying the Layout Component</a></h4> <p>Once the <code>layout</code> component has been defined, we may create a Blade view that utilizes the component. In this example, we will define a simple view that displays our task list:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-layout</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@foreach </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$tasks</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">as</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$task</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">>{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$task</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@endforeach</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-layout</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'>  <x-layout> @foreach ($tasks as $task) <div>{{ $task }}</div> @endforeach </x-layout></div></code></pre> </div> <p>Remember, content that is injected into a component will be supplied to the default <code>$slot</code> variable within our <code>layout</code> component. As you may have noticed, our <code>layout</code> also respects a <code>$title</code> slot if one is provided; otherwise, a default title is shown. We may inject a custom title from our task list view using the standard slot syntax discussed in the <a href="#components">component documentation</a>:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">x-layout</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FFFFFF;">x-slot:title</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #BFC7D5;"> Custom Title</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-slot</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@foreach </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$tasks</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">as</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$task</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">>{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$task</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@endforeach</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">x-layout</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'>  <x-layout> <x-slot:title> Custom Title </x-slot> @foreach ($tasks as $task) <div>{{ $task }}</div> @endforeach </x-layout></div></code></pre> </div> <p>Now that we have defined our layout and task list views, we just need to return the <code>task</code> view from a route:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> App\Models\</span><span style="color: #FFCB8B;">Task</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #FFCB8B;">Route</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">get</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">/tasks</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">()</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">view</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">tasks</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">[</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">tasks</span><span style="color: #D9F5DD;">'</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">=></span><span style="color: #82AAFF;"> </span><span style="color: #FFCB8B;">Task</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">all</span><span style="color: #BFC7D5;">()]);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;">});</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use App\Models\Task; Route::get('/tasks', function () { return view('tasks', ['tasks' => Task::all()]); });</div></code></pre> </div> <h3 id="layouts-using-template-inheritance"><a href="#layouts-using-template-inheritance">Layouts Using Template Inheritance</a></h3> <h4 id="defining-a-layout"><a href="#defining-a-layout">Defining a Layout</a></h4> <p>Layouts may also be created via "template inheritance". This was the primary way of building applications prior to the introduction of <a href="#components">components</a>.</p> <p>To get started, let's take a look at a simple example. First, we will examine a page layout. Since most web applications maintain the same general layout across various pages, it's convenient to define this layout as a single Blade view:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">html</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">head</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">title</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">App Name - </span><span style="color: #C792EA;">@yield</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">title</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">title</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">head</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">body</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@section</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">sidebar</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> This is the master sidebar.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@show</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">container</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@yield</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">content</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">body</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">html</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'>  <html> <head> <title>App Name - @yield('title')</title> </head> <body> @section('sidebar') This is the master sidebar. @show <div class="container"> @yield('content') </div> </body> </html></div></code></pre> </div> <p>As you can see, this file contains typical HTML mark-up. However, take note of the <code>@section</code> and <code>@yield</code> directives. The <code>@section</code> directive, as the name implies, defines a section of content, while the <code>@yield</code> directive is used to display the contents of a given section.</p> <p>Now that we have defined a layout for our application, let's define a child page that inherits the layout.</p> <h4 id="extending-a-layout"><a href="#extending-a-layout">Extending a Layout</a></h4> <p>When defining a child view, use the <code>@extends</code> Blade directive to specify which layout the child view should "inherit". Views which extend a Blade layout may inject content into the layout's sections using <code>@section</code> directives. Remember, as seen in the example above, the contents of these sections will be displayed in the layout using <code>@yield</code>:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;">@extends</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">layouts.app</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #C792EA;">@section</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">title</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Page Title</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #C792EA;">@section</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">sidebar</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> @@parent</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">p</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">This is appended to the master sidebar.</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">p</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #C792EA;">@endsection</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #C792EA;">@section</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">content</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">p</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">This is my body content.</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">p</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #C792EA;">@endsection</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'>  @extends('layouts.app') @section('title', 'Page Title') @section('sidebar') @@parent <p>This is appended to the master sidebar.</p> @endsection @section('content') <p>This is my body content.</p> @endsection</div></code></pre> </div> <p>In this example, the <code>sidebar</code> section is utilizing the <code>@@parent</code> directive to append (rather than overwriting) content to the layout's sidebar. The <code>@@parent</code> directive will be replaced by the content of the layout when the view is rendered.</p> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:px-4 lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 lg:my-1.5 rounded-xs flex items-center justify-center shrink-0 bg-[#8D54C5]"> <svg width="16" height="21" viewBox="0 0 16 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 20H11M5.5 14H10.5M15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 10.7924 2.63505 13.2029 5 14.3264V17H11V14.3264C13.3649 13.2029 15 10.7924 15 8Z" stroke="#FDFDFC" stroke-width="1.5" stroke-linecap="square"/> </svg> </div> <p class="callout text-pretty"> Contrary to the previous example, this <code>sidebar</code> section ends with <code>@endsection</code> instead of <code>@show</code>. The <code>@endsection</code> directive will only define a section while <code>@show</code> will define and <strong>immediately yield</strong> the section.</p> </div> <p>The <code>@yield</code> directive also accepts a default value as its second parameter. This value will be rendered if the section being yielded is undefined:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@yield</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">content</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Default content</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @yield('content', 'Default content')</div></code></pre> </div> <h2 id="forms"><a href="#forms">Forms</a></h2> <h3 id="csrf-field"><a href="#csrf-field">CSRF Field</a></h3> <p>Anytime you define an HTML form in your application, you should include a hidden CSRF token field in the form so that <a href="/docs/12.x/csrf">the CSRF protection</a> middleware can validate the request. You may use the <code>@csrf</code> Blade directive to generate the token field:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">form</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">method</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">POST</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">action</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">/profile</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@csrf</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">form</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <form method="POST" action="/profile"> @csrf ... </form></div></code></pre> </div> <h3 id="method-field"><a href="#method-field">Method Field</a></h3> <p>Since HTML forms can't make <code>PUT</code>, <code>PATCH</code>, or <code>DELETE</code> requests, you will need to add a hidden <code>_method</code> field to spoof these HTTP verbs. The <code>@method</code> Blade directive can create this field for you:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">form</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">action</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">/foo/bar</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">method</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">POST</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@method</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">PUT</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">form</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <form action="/foo/bar" method="POST"> @method('PUT') ... </form></div></code></pre> </div> <h3 id="validation-errors"><a href="#validation-errors">Validation Errors</a></h3> <p>The <code>@error</code> directive may be used to quickly check if <a href="/docs/12.x/validation#quick-displaying-the-validation-errors">validation error messages</a> exist for a given attribute. Within an <code>@error</code> directive, you may echo the <code>$message</code> variable to display the error message:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">label</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">for</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">title</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">Post Title</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">label</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">input</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">id</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">title</span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">type</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">text</span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C792EA;">@error</span><span style="color: #C3E88D;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">title</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">) is-invalid </span><span style="color: #C792EA;">@enderror</span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #89DDFF;">/></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #C792EA;">@error</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">title</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">alert alert-danger</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">>{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$message</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #C792EA;">@enderror</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'>  <label for="title">Post Title</label> <input id="title" type="text" class="@error('title') is-invalid @enderror" /> @error('title') <div class="alert alert-danger">{{ $message }}</div> @enderror</div></code></pre> </div> <p>Since the <code>@error</code> directive compiles to an "if" statement, you may use the <code>@else</code> directive to render content when there is not an error for an attribute:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">label</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">for</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">email</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">Email address</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">label</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">input</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">id</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">email</span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">type</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">email</span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C792EA;">@error</span><span style="color: #C3E88D;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">email</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">) is-invalid </span><span style="color: #C792EA;">@else</span><span style="color: #C3E88D;"> is-valid </span><span style="color: #C792EA;">@enderror</span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">9</span><span style="color: #89DDFF;">/></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'>  <label for="email">Email address</label> <input id="email" type="email" class="@error('email') is-invalid @else is-valid @enderror" /></div></code></pre> </div> <p>You may pass <a href="/docs/12.x/validation#named-error-bags">the name of a specific error bag</a> as the second parameter to the <code>@error</code> directive to retrieve validation error messages on pages containing multiple forms:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">label</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">for</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">email</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></span><span style="color: #BFC7D5;">Email address</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">label</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">input</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">id</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">email</span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">type</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">email</span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C792EA;">@error</span><span style="color: #C3E88D;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">email</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">login</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">) is-invalid </span><span style="color: #C792EA;">@enderror</span><span style="color: #D9F5DD;">"</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #89DDFF;">/></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #C792EA;">@error</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">email</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">login</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">class</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">alert alert-danger</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">>{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$message</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #C792EA;">@enderror</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'>  <label for="email">Email address</label> <input id="email" type="email" class="@error('email', 'login') is-invalid @enderror" /> @error('email', 'login') <div class="alert alert-danger">{{ $message }}</div> @enderror</div></code></pre> </div> <h2 id="stacks"><a href="#stacks">Stacks</a></h2> <p>Blade allows you to push to named stacks which can be rendered somewhere else in another view or layout. This can be particularly useful for specifying any JavaScript libraries required by your child views:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@push</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">scripts</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">script</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">src</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">/example.js</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></</span><span style="color: #FF5572;">script</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #C792EA;">@endpush</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @push('scripts') <script src="/example.js"></script> @endpush</div></code></pre> </div> <p>If you would like to <code>@push</code> content if a given boolean expression evaluates to <code>true</code>, you may use the <code>@pushIf</code> directive:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #82AAFF;">@pushIf</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$shouldPush</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">scripts</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">script</span><span style="color: #89DDFF;"> </span><span style="color: #FFCB6B;">src</span><span style="color: #89DDFF;">=</span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;">/example.js</span><span style="color: #D9F5DD;">"</span><span style="color: #89DDFF;">></</span><span style="color: #FF5572;">script</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #82AAFF;">@endPushIf</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @pushIf($shouldPush, 'scripts') <script src="/example.js"></script> @endPushIf</div></code></pre> </div> <p>You may push to a stack as many times as needed. To render the complete stack contents, pass the name of the stack to the <code>@stack</code> directive:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">head</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@stack</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">scripts</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">head</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <head>  @stack('scripts') </head></div></code></pre> </div> <p>If you would like to prepend content onto the beginning of a stack, you should use the <code>@prepend</code> directive:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@push</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">scripts</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> This will be second...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #C792EA;">@endpush</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;">// Later...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #C792EA;">@prepend</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">scripts</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span style="color: #BFC7D5;"> This will be first...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">9</span><span style="color: #C792EA;">@endprepend</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @push('scripts') This will be second... @endpush // Later... @prepend('scripts') This will be first... @endprepend</div></code></pre> </div> <h2 id="service-injection"><a href="#service-injection">Service Injection</a></h2> <p>The <code>@inject</code> directive may be used to retrieve a service from the Laravel <a href="/docs/12.x/container">service container</a>. The first argument passed to <code>@inject</code> is the name of the variable the service will be placed into, while the second argument is the class or interface name of the service you wish to resolve:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">@inject</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">metrics</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">App\Services\MetricsService</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> Monthly Revenue: </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$metrics</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">monthlyRevenue</span><span style="color: #BFC7D5;">() </span><span style="color: #89DDFF;">}}</span><span style="color: #BFC7D5;">.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">div</span><span style="color: #89DDFF;">></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @inject('metrics', 'App\Services\MetricsService') <div> Monthly Revenue: {{ $metrics->monthlyRevenue() }}. </div></div></code></pre> </div> <h2 id="rendering-inline-blade-templates"><a href="#rendering-inline-blade-templates">Rendering Inline Blade Templates</a></h2> <p>Sometimes you may need to transform a raw Blade template string into valid HTML. You may accomplish this using the <code>render</code> method provided by the <code>Blade</code> facade. The <code>render</code> method accepts the Blade template string and an optional array of data to provide to the template:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">Blade</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Blade</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">render</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Hello, {{ $name }}</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, [</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Julian Bashir</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">]);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Illuminate\Support\Facades\Blade; return Blade::render('Hello, {{ $name }}', ['name' => 'Julian Bashir']);</div></code></pre> </div> <p>Laravel renders inline Blade templates by writing them to the <code>storage/framework/views</code> directory. If you would like Laravel to remove these temporary files after rendering the Blade template, you may provide the <code>deleteCachedView</code> argument to the method:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Blade</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">render</span><span style="color: #BFC7D5;">(</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Hello, {{ $name }}</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> [</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">name</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">=></span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Julian Bashir</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">],</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> deleteCachedView: </span><span style="color: #82AAFF;">true</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> return Blade::render( 'Hello, {{ $name }}', ['name' => 'Julian Bashir'], deleteCachedView: true );</div></code></pre> </div> <h2 id="rendering-blade-fragments"><a href="#rendering-blade-fragments">Rendering Blade Fragments</a></h2> <p>When using frontend frameworks such as <a href="https://turbo.hotwired.dev/">Turbo</a> and <a href="https://htmx.org/">htmx</a>, you may occasionally need to only return a portion of a Blade template within your HTTP response. Blade "fragments" allow you to do just that. To get started, place a portion of your Blade template within <code>@fragment</code> and <code>@endfragment</code> directives:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #82AAFF;">@fragment</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">user-list</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">ul</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@foreach </span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">as</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">li</span><span style="color: #89DDFF;">>{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$user</span><span style="color: #89DDFF;">->name</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</</span><span style="color: #FF5572;">li</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">@endforeach</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;"></</span><span style="color: #FF5572;">ul</span><span style="color: #89DDFF;">></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #82AAFF;">@endfragment</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @fragment('user-list') <ul> @foreach ($users as $user) <li>{{ $user->name }}</li> @endforeach </ul> @endfragment</div></code></pre> </div> <p>Then, when rendering the view that utilizes this template, you may invoke the <code>fragment</code> method to specify that only the specified fragment should be included in the outgoing HTTP response:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">view</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">dashboard</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">[</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">users</span><span style="color: #D9F5DD;">'</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">=></span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">users</span><span style="color: #BFC7D5;">])</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">fragment</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">user-list</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> return view('dashboard', ['users' => $users])->fragment('user-list');</div></code></pre> </div> <p>The <code>fragmentIf</code> method allows you to conditionally return a fragment of a view based on a given condition. Otherwise, the entire view will be returned:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">view</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">dashboard</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">[</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">users</span><span style="color: #D9F5DD;">'</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">=></span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">users</span><span style="color: #BFC7D5;">])</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">fragmentIf</span><span style="color: #BFC7D5;">(</span><span style="color: #BEC5D4;">$request</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">hasHeader</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">HX-Request</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">), </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">user-list</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> return view('dashboard', ['users' => $users]) ->fragmentIf($request->hasHeader('HX-Request'), 'user-list');</div></code></pre> </div> <p>The <code>fragments</code> and <code>fragmentsIf</code> methods allow you to return multiple view fragments in the response. The fragments will be concatenated together:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #82AAFF;">view</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">dashboard</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">[</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">users</span><span style="color: #D9F5DD;">'</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">=></span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">users</span><span style="color: #BFC7D5;">])</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">fragments</span><span style="color: #BFC7D5;">([</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">user-list</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">comment-list</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">]);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #82AAFF;">view</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">dashboard</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">,</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">[</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">users</span><span style="color: #D9F5DD;">'</span><span style="color: #82AAFF;"> </span><span style="color: #89DDFF;">=></span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">$</span><span style="color: #BEC5D4;">users</span><span style="color: #BFC7D5;">])</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">fragmentsIf</span><span style="color: #BFC7D5;">(</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$request</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">hasHeader</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">HX-Request</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">),</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #BFC7D5;"> [</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">user-list</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">comment-list</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">]</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">8</span><span style="color: #BFC7D5;"> );</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> view('dashboard', ['users' => $users]) ->fragments(['user-list', 'comment-list']); view('dashboard', ['users' => $users]) ->fragmentsIf( $request->hasHeader('HX-Request'), ['user-list', 'comment-list'] );</div></code></pre> </div> <h2 id="extending-blade"><a href="#extending-blade">Extending Blade</a></h2> <p>Blade allows you to define your own custom directives using the <code>directive</code> method. When the Blade compiler encounters the custom directive, it will call the provided callback with the expression that the directive contains.</p> <p>The following example creates a <code>@datetime($var)</code> directive which formats a given <code>$var</code>, which should be an instance of <code>DateTime</code>:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #D3423E;"><?php</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #C792EA;">namespace</span><span style="color: #BFC7D5;"> App\Providers;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">Blade</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\</span><span style="color: #FFCB8B;">ServiceProvider</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB6B;">AppServiceProvider</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">extends</span><span style="color: #BFC7D5;"> </span><span style="color: #A9C77D;">ServiceProvider</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #697098;"> * Register any application services.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">13</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">register</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">14</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">15</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">16</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">17</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">18</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">19</span><span style="color: #697098;"> * Bootstrap any application services.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">20</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">21</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">boot</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">22</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">23</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Blade</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">directive</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">datetime</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #C792EA;">string</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$expression</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">24</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">"</span><span style="color: #C3E88D;"><?php echo (</span><span style="color: #BEC5D4;">$expression</span><span style="color: #C3E88D;">)->format('m/d/Y H:i'); ?></span><span style="color: #D9F5DD;">"</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">25</span><span style="color: #BFC7D5;"> });</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">26</span><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">27</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <?php namespace App\Providers; use Illuminate\Support\Facades\Blade; use Illuminate\Support\ServiceProvider; class AppServiceProvider extends ServiceProvider { /** * Register any application services. */ public function register(): void { // ... } /** * Bootstrap any application services. */ public function boot(): void { Blade::directive('datetime', function (string $expression) { return "<?php echo ($expression)->format('m/d/Y H:i'); ?>"; }); } }</div></code></pre> </div> <p>As you can see, we will chain the <code>format</code> method onto whatever expression is passed into the directive. So, in this example, the final PHP generated by this directive will be:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #D3423E;"><?php</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">echo</span><span style="color: #82AAFF;"> </span><span style="color: #BFC7D5;">($</span><span style="color: #BEC5D4;">var</span><span style="color: #BFC7D5;">)</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">format</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">m/d/Y H:i</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">); </span><span style="color: #D3423E;">?></span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> <?php echo ($var)->format('m/d/Y H:i'); ?></div></code></pre> </div> <div class="flex flex-col p-3 mb-10 space-y-4 text-base leading-normal border rounded-md lg:px-4 lg:flex-row lg:space-y-0 lg:space-x-4 border-sand-light-5 callout dark:border-sand-dark-5 dark:text-sand-light-3 text-sand-dark-3"> <div class="w-8 h-8 p-2 lg:my-1.5 rounded-xs flex items-center justify-center shrink-0 bg-[#F53003]"> <svg width="2" height="18" viewBox="0 0 2 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 17V16.99M1 1V13" stroke="#FDFDFC" stroke-width="2" stroke-linecap="square"/> </svg> </div> <p class="callout text-pretty"> After updating the logic of a Blade directive, you will need to delete all of the cached Blade views. The cached Blade views may be removed using the <code>view:clear</code> Artisan command.</p> </div> <h3 id="custom-echo-handlers"><a href="#custom-echo-handlers">Custom Echo Handlers</a></h3> <p>If you attempt to "echo" an object using Blade, the object's <code>__toString</code> method will be invoked. The <a href="https://www.php.net/manual/en/language.oop5.magic.php#object.tostring">__toString</a> method is one of PHP's built-in "magic methods". However, sometimes you may not have control over the <code>__toString</code> method of a given class, such as when the class that you are interacting with belongs to a third-party library.</p> <p>In these cases, Blade allows you to register a custom echo handler for that particular type of object. To accomplish this, you should invoke Blade's <code>stringable</code> method. The <code>stringable</code> method accepts a closure. This closure should type-hint the type of object that it is responsible for rendering. Typically, the <code>stringable</code> method should be invoked within the <code>boot</code> method of your application's <code>AppServiceProvider</code> class:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">Blade</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Money\</span><span style="color: #FFCB8B;">Money</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #697098;"> * Bootstrap any application services.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">boot</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Blade</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">stringable</span><span style="color: #BFC7D5;">(</span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">Money</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$money</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$money</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">formatTo</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">en_GB</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;"> });</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">12</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Illuminate\Support\Facades\Blade; use Money\Money; /** * Bootstrap any application services. */ public function boot(): void { Blade::stringable(function (Money $money) { return $money->formatTo('en_GB'); }); }</div></code></pre> </div> <p>Once your custom echo handler has been defined, you may simply echo the object in your Blade template:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #BFC7D5;">Cost: </span><span style="color: #89DDFF;">{{</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$money</span><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">}}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> Cost: {{ $money }}</div></code></pre> </div> <h3 id="custom-if-statements"><a href="#custom-if-statements">Custom If Statements</a></h3> <p>Programming a custom directive is sometimes more complex than necessary when defining simple, custom conditional statements. For that reason, Blade provides a <code>Blade::if</code> method which allows you to quickly define custom conditional directives using closures. For example, let's define a custom conditional that checks the configured default "disk" for the application. We may do this in the <code>boot</code> method of our <code>AppServiceProvider</code>:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">Blade</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #697098;">/**</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #697098;"> * Bootstrap any application services.</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #C792EA;">public</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">boot</span><span style="color: #D9F5DD;">()</span><span style="color: #89DDFF;">:</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">void</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">Blade</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">if</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">disk</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #C792EA;">string</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$value</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #BFC7D5;"> </span><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #82AAFF;">config</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">filesystems.default</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">) </span><span style="color: #C792EA;">===</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$value</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> });</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #BFC7D5;">}</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> use Illuminate\Support\Facades\Blade; /** * Bootstrap any application services. */ public function boot(): void { Blade::if('disk', function (string $value) { return config('filesystems.default') === $value; }); }</div></code></pre> </div> <p>Once the custom conditional has been defined, you can use it within your templates:</p> <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="blade" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 1</span><span style="color: #82AAFF;">@disk</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">local</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 2</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 3</span><span style="color: #82AAFF;">@elsedisk</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">s3</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 4</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 5</span><span style="color: #C792EA;">@else</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 6</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 7</span><span style="color: #82AAFF;">@enddisk</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 8</span> </div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number"> 9</span><span style="color: #82AAFF;">@unlessdisk</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">local</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">10</span><span style="color: #BFC7D5;"> </span><span style="color: #697098;"></span></div><div class='line'><span style="color:#4c5374; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">11</span><span style="color: #82AAFF;">@enddisk</span></div><div aria-hidden='true' hidden tabindex='-1' style='display: none;' class='torchlight-copy-target'> @disk('local')  @elsedisk('s3')  @else  @enddisk @unlessdisk('local')  @enddisk</div></code></pre> </div> </div> </section> </section> </div> </section> <div class="hidden xl:block relative col-span-12 lg:pb-10 lg:col-span-9 lg:col-start-4 xl:col-start-auto xl:col-span-3"> <div class="relative lg:sticky lg:top-28 pl-10"> <div> <h3 class="text-xs font-medium text-sand-light-11 dark:text-sand-dark-11 mb-3"> On this page </h3> <div class="max-h-[calc(100vh-140px)] pb-5 overflow-y-auto"> <div id="on-this-page-content" class="border-l border-sand-light-5 dark:border-sand-dark-5 pr-4"> <ul> <li class="mt-1.5 first:mt-0 py-0.5"> <a href="#introduction" class="inline-block border-l-[3px] border-transparent pl-4 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Introduction </a> <ul class="mt-1.5"> <li class="py-0.5"> <a href="#supercharging-blade-with-livewire" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Supercharging Blade With Livewire </a> </li> </ul> </li> <li class="mt-1.5 first:mt-0 py-0.5"> <a href="#displaying-data" class="inline-block border-l-[3px] border-transparent pl-4 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Displaying Data </a> <ul class="mt-1.5"> <li class="py-0.5"> <a href="#html-entity-encoding" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> HTML Entity Encoding </a> </li> <li class="py-0.5"> <a href="#blade-and-javascript-frameworks" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Blade and JavaScript Frameworks </a> </li> </ul> </li> <li class="mt-1.5 first:mt-0 py-0.5"> <a href="#blade-directives" class="inline-block border-l-[3px] border-transparent pl-4 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Blade Directives </a> <ul class="mt-1.5"> <li class="py-0.5"> <a href="#if-statements" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> If Statements </a> </li> <li class="py-0.5"> <a href="#switch-statements" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Switch Statements </a> </li> <li class="py-0.5"> <a href="#loops" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Loops </a> </li> <li class="py-0.5"> <a href="#the-loop-variable" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> The Loop Variable </a> </li> <li class="py-0.5"> <a href="#conditional-classes" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Conditional Classes </a> </li> <li class="py-0.5"> <a href="#additional-attributes" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Additional Attributes </a> </li> <li class="py-0.5"> <a href="#including-subviews" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Including Subviews </a> </li> <li class="py-0.5"> <a href="#the-once-directive" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> The @once Directive </a> </li> <li class="py-0.5"> <a href="#raw-php" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Raw PHP </a> </li> <li class="py-0.5"> <a href="#comments" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Comments </a> </li> </ul> </li> <li class="mt-1.5 first:mt-0 py-0.5"> <a href="#components" class="inline-block border-l-[3px] border-transparent pl-4 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Components </a> <ul class="mt-1.5"> <li class="py-0.5"> <a href="#rendering-components" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Rendering Components </a> </li> <li class="py-0.5"> <a href="#index-components" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Index Components </a> </li> <li class="py-0.5"> <a href="#passing-data-to-components" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Passing Data to Components </a> </li> <li class="py-0.5"> <a href="#component-attributes" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Component Attributes </a> </li> <li class="py-0.5"> <a href="#reserved-keywords" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Reserved Keywords </a> </li> <li class="py-0.5"> <a href="#slots" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Slots </a> </li> <li class="py-0.5"> <a href="#inline-component-views" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Inline Component Views </a> </li> <li class="py-0.5"> <a href="#dynamic-components" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Dynamic Components </a> </li> <li class="py-0.5"> <a href="#manually-registering-components" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Manually Registering Components </a> </li> </ul> </li> <li class="mt-1.5 first:mt-0 py-0.5"> <a href="#anonymous-components" class="inline-block border-l-[3px] border-transparent pl-4 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Anonymous Components </a> <ul class="mt-1.5"> <li class="py-0.5"> <a href="#anonymous-index-components" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Anonymous Index Components </a> </li> <li class="py-0.5"> <a href="#data-properties-attributes" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Data Properties / Attributes </a> </li> <li class="py-0.5"> <a href="#accessing-parent-data" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Accessing Parent Data </a> </li> <li class="py-0.5"> <a href="#anonymous-component-paths" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Anonymous Components Paths </a> </li> </ul> </li> <li class="mt-1.5 first:mt-0 py-0.5"> <a href="#building-layouts" class="inline-block border-l-[3px] border-transparent pl-4 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Building Layouts </a> <ul class="mt-1.5"> <li class="py-0.5"> <a href="#layouts-using-components" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Layouts Using Components </a> </li> <li class="py-0.5"> <a href="#layouts-using-template-inheritance" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Layouts Using Template Inheritance </a> </li> </ul> </li> <li class="mt-1.5 first:mt-0 py-0.5"> <a href="#forms" class="inline-block border-l-[3px] border-transparent pl-4 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Forms </a> <ul class="mt-1.5"> <li class="py-0.5"> <a href="#csrf-field" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> CSRF Field </a> </li> <li class="py-0.5"> <a href="#method-field" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Method Field </a> </li> <li class="py-0.5"> <a href="#validation-errors" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Validation Errors </a> </li> </ul> </li> <li class="mt-1.5 first:mt-0 py-0.5"> <a href="#stacks" class="inline-block border-l-[3px] border-transparent pl-4 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Stacks </a> </li> <li class="mt-1.5 first:mt-0 py-0.5"> <a href="#service-injection" class="inline-block border-l-[3px] border-transparent pl-4 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Service Injection </a> </li> <li class="mt-1.5 first:mt-0 py-0.5"> <a href="#rendering-inline-blade-templates" class="inline-block border-l-[3px] border-transparent pl-4 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Rendering Inline Blade Templates </a> </li> <li class="mt-1.5 first:mt-0 py-0.5"> <a href="#rendering-blade-fragments" class="inline-block border-l-[3px] border-transparent pl-4 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Rendering Blade Fragments </a> </li> <li class="mt-1.5 first:mt-0 py-0.5"> <a href="#extending-blade" class="inline-block border-l-[3px] border-transparent pl-4 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Extending Blade </a> <ul class="mt-1.5"> <li class="py-0.5"> <a href="#custom-echo-handlers" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Custom Echo Handlers </a> </li> <li class="py-0.5"> <a href="#custom-if-statements" class="inline-block border-l-[3px] border-transparent pl-8 text-[13px] text-sand-light-11 dark:text-sand-dark-11 hover:border-sand-dark-4/25 hover:text-sand-light-12 dark:hover:border-sand-light-4/25 dark:hover:text-sand-dark-12 [&[data-active='true']]:border-laravel-red [&[data-active='true']]:text-sand-light-12 [&[data-active='true']]:dark:text-sand-dark-12"> Custom If Statements </a> </li> </ul> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="text-sand-dark-10"> <div class="max-w-full w-full xl:max-w-[1400px] pt-10 md:pt-24 px-4 xl:px-16 mx-auto border-l border-sand-light-7 dark:border-sand-dark-6"> <div class="grid grid-cols-12 lg:gap-12"> <div class="col-span-12 lg:col-span-3 lg:mt-14"> <p class="text-pretty">Laravel is the most productive way to<br class="block lg:hidden"> build, deploy, and monitor software.</p> <ul class="flex items-center justify-start my-8 space-x-6 lg:my-16"> <li> <a href="https://github.com/laravel" target="_blank" title="Laravel on GitHub" class="transition duration-100 hover:text-sand-dark-6"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fill-rule="evenodd" clip-rule="evenodd" d="M0 12.305C0 17.74 3.438 22.352 8.207 23.979C8.807 24.092 9.027 23.712 9.027 23.386C9.027 23.094 9.016 22.32 9.01 21.293C5.671 22.037 4.967 19.643 4.967 19.643C4.422 18.223 3.635 17.845 3.635 17.845C2.545 17.081 3.718 17.096 3.718 17.096C4.921 17.183 5.555 18.364 5.555 18.364C6.626 20.244 8.364 19.702 9.048 19.386C9.157 18.591 9.468 18.049 9.81 17.741C7.145 17.431 4.344 16.376 4.344 11.661C4.344 10.318 4.811 9.219 5.579 8.359C5.456 8.048 5.044 6.797 5.696 5.103C5.696 5.103 6.704 4.773 8.996 6.364C9.954 6.091 10.98 5.955 12.001 5.95C13.02 5.955 14.047 6.091 15.005 6.364C17.295 4.772 18.302 5.103 18.302 5.103C18.956 6.797 18.544 8.048 18.421 8.359C19.191 9.219 19.655 10.318 19.655 11.661C19.655 16.387 16.849 17.428 14.175 17.732C14.606 18.112 14.99 18.862 14.99 20.011C14.99 21.656 14.975 22.982 14.975 23.386C14.975 23.715 15.191 24.098 15.8 23.977C20.565 22.347 24 17.738 24 12.305C24 5.508 18.627 0 12 0C5.373 0 0 5.508 0 12.305Z" fill="currentColor" /> </svg> </a> </li> <li> <a href="https://x.com/laravelphp" target="_blank" title="Laravel on X" class="transition duration-100 hover:text-sand-dark-6"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M13.969 10.1571L22.7069 0H20.6363L13.0491 8.81931L6.9893 0H0L9.16366 13.3364L0 23.9877H2.07073L10.083 14.6742L16.4826 23.9877H23.4719L13.9684 10.1571H13.969ZM11.1328 13.4538L10.2043 12.1258L2.81684 1.55881H5.99736L11.9592 10.0867L12.8876 11.4147L20.6373 22.4998H17.4567L11.1328 13.4544V13.4538Z" fill="currentColor" /> </svg> </a> </li> <li> <a href="https://www.youtube.com/@LaravelPHP" target="_blank" title="Laravel on YouTube" class="transition duration-100 hover:text-sand-dark-6"> <svg width="35" height="24" viewBox="0 0 35 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M33.892 3.75519C33.4994 2.27706 32.3428 1.11294 30.8742 0.717875C28.2124 0 17.5385 0 17.5385 0C17.5385 0 6.8648 0 4.20286 0.717875C2.7343 1.113 1.57768 2.27706 1.18511 3.75519C0.471863 6.43437 0.471863 12.0243 0.471863 12.0243C0.471863 12.0243 0.471863 17.6141 1.18511 20.2933C1.57768 21.7714 2.7343 22.8871 4.20286 23.2821C6.8648 24 17.5385 24 17.5385 24C17.5385 24 28.2123 24 30.8742 23.2821C32.3428 22.8871 33.4994 21.7714 33.892 20.2933C34.6052 17.6141 34.6052 12.0243 34.6052 12.0243C34.6052 12.0243 34.6052 6.43437 33.892 3.75519ZM14.0476 17.0994V6.94906L22.9688 12.0244L14.0476 17.0994Z" fill="currentColor" /> </svg> </a> </li> <li> <a href="https://discord.com/invite/laravel" target="_blank" title="Laravel on Discord" class="transition duration-100 hover:text-sand-dark-6"> <svg width="33" height="24" viewBox="0 0 33 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M27.4296 2.00996C25.3491 1.05745 23.1528 0.381713 20.8966 0C20.5879 0.551901 20.3086 1.11973 20.0598 1.70112C17.6566 1.33898 15.2127 1.33898 12.8095 1.70112C12.5605 1.11979 12.2812 0.551968 11.9726 0C9.71504 0.384937 7.51722 1.06228 5.43462 2.01494C1.30013 8.132 0.179328 14.0971 0.739727 19.9776C3.16099 21.7665 5.87108 23.127 8.75218 24C9.40092 23.1275 9.97497 22.2018 10.4682 21.2329C9.53134 20.883 8.62706 20.4512 7.76588 19.9427C7.99253 19.7783 8.2142 19.609 8.42839 19.4446C10.9342 20.623 13.6692 21.234 16.4384 21.234C19.2075 21.234 21.9425 20.623 24.4483 19.4446C24.665 19.6214 24.8867 19.7908 25.1108 19.9427C24.248 20.4521 23.3421 20.8846 22.4035 21.2354C22.8962 22.2039 23.4702 23.1287 24.1196 24C27.0031 23.1305 29.7153 21.7707 32.137 19.9801C32.7945 13.1606 31.0137 7.25031 27.4296 2.00996ZM11.1781 16.3611C9.61644 16.3611 8.32628 14.944 8.32628 13.2005C8.32628 11.457 9.57161 10.0274 11.1731 10.0274C12.7746 10.0274 14.0548 11.457 14.0274 13.2005C14 14.944 12.7696 16.3611 11.1781 16.3611ZM21.6986 16.3611C20.1345 16.3611 18.8493 14.944 18.8493 13.2005C18.8493 11.457 20.0946 10.0274 21.6986 10.0274C23.3026 10.0274 24.5729 11.457 24.5455 13.2005C24.5181 14.944 23.2902 16.3611 21.6986 16.3611Z" fill="currentColor" /> </svg> </a> </li> </ul> <div> <ul class="flex justify-start space-x-8"> <li>© 2025 Laravel</li> <li><a href="https://laravel.com/trademark" class="transition duration-100 hover:text-sand-dark-6">Legal</a></li> <li><a href="https://status.laravel.com/" class="transition duration-100 hover:text-sand-dark-6">Status</a></li> </ul> </div> </div> <div class="grid grid-cols-subgrid col-span-12 lg:col-span-9"> <div class="grid grid-cols-subgrid mt-14 lg:mt-0 self-start lg:col-span-2 col-span-6 order-2"> <h4 class="mb-8 text-base text-sand-light-12 dark:text-sand-dark-12 font-medium lg:col-span-2 col-span-6"> Products </h4> <ul class="col-span-6 mb-6 space-y-6 lg:mb-0 lg:col-span-2"> <li> <a href="https://cloud.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Cloud</a> </li> <li> <a href="https://forge.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Forge</a> </li> <li> <a href="https://vapor.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Vapor</a> </li> <li> <a href="https://nightwatch.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Nightwatch</a> </li> <li> <a href="https://nova.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Nova</a> </li> </ul> </div> <div class="grid grid-cols-subgrid mt-14 lg:mt-0 self-start lg:col-span-4 col-span-12 order-3"> <h4 class="mb-8 text-base text-sand-light-12 dark:text-sand-dark-12 font-medium lg:col-span-4 col-span-12"> Packages </h4> <ul class="col-span-6 mb-6 space-y-6 lg:mb-0 lg:col-span-2"> <li> <a href="/docs/cashier" class="transition duration-100 hover:text-sand-dark-6">Cashier</a> </li> <li> <a href="/docs/dusk" class="transition duration-100 hover:text-sand-dark-6">Dusk</a> </li> <li> <a href="/docs/horizon" class="transition duration-100 hover:text-sand-dark-6">Horizon</a> </li> <li> <a href="/docs/octane" class="transition duration-100 hover:text-sand-dark-6">Octane</a> </li> <li> <a href="/docs/scout" class="transition duration-100 hover:text-sand-dark-6">Scout</a> </li> <li> <a href="/docs/pennant" class="transition duration-100 hover:text-sand-dark-6">Pennant</a> </li> <li> <a href="/docs/pint" class="transition duration-100 hover:text-sand-dark-6">Pint</a> </li> </ul> <ul class="col-span-6 mb-6 space-y-6 lg:mb-0 lg:col-span-2"> <li> <a href="/docs/sail" class="transition duration-100 hover:text-sand-dark-6">Sail</a> </li> <li> <a href="/docs/sanctum" class="transition duration-100 hover:text-sand-dark-6">Sanctum</a> </li> <li> <a href="/docs/socialite" class="transition duration-100 hover:text-sand-dark-6">Socialite</a> </li> <li> <a href="/docs/telescope" class="transition duration-100 hover:text-sand-dark-6">Telescope</a> </li> <li> <a href="/docs/pulse" class="transition duration-100 hover:text-sand-dark-6">Pulse</a> </li> <li> <a href="/docs/reverb" class="transition duration-100 hover:text-sand-dark-6">Reverb</a> </li> <li> <a href="/docs/broadcasting" class="transition duration-100 hover:text-sand-dark-6">Echo</a> </li> </ul> </div> <div class="grid grid-cols-subgrid mt-14 lg:mt-0 self-start lg:col-span-2 col-span-6 order-1"> <h4 class="mb-8 text-base text-sand-light-12 dark:text-sand-dark-12 font-medium lg:col-span-2 col-span-6"> Resources </h4> <ul class="col-span-6 mb-6 space-y-6 lg:mb-0 lg:col-span-2"> <li> <a href="/docs" class="transition duration-100 hover:text-sand-dark-6">Documentation</a> </li> <li> <a href="/starter-kits" class="transition duration-100 hover:text-sand-dark-6">Starter Kits</a> </li> <li> <a href="/docs/releases" class="transition duration-100 hover:text-sand-dark-6">Release Notes</a> </li> <li> <a href="https://blog.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Blog</a> </li> <li> <a href="https://partners.laravel.com" class="transition duration-100 hover:text-sand-dark-6">Partners</a> </li> <li> <a href="https://laravel-news.com" class="transition duration-100 hover:text-sand-dark-6">News</a> </li> <li> <a href="https://larabelles.com/" class="transition duration-100 hover:text-sand-dark-6">Larabelles</a> </li> <li> <a href="https://larajobs.com/?partner=5" class="transition duration-100 hover:text-sand-dark-6">Jobs</a> </li> <li> <a href="/careers" class="transition duration-100 hover:text-sand-dark-6">Careers</a> </li> </ul> </div> </div> <div class="col-span-12 text-sand-light-1"> <svg class="w-full h-full text-laravel-red" width="1280" height="308" viewBox="0 0 1280 308" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M50.2753 0H0V308.689H144.713V263.27H50.2753V0Z" fill="currentColor" /> <path d="M322.209 130.973C315.796 120.684 306.688 112.602 294.883 106.718C283.081 100.84 271.201 97.8969 259.253 97.8969C243.798 97.8969 229.665 100.764 216.843 106.496C204.014 112.228 193.015 120.099 183.834 130.091C174.654 140.088 167.51 151.628 162.412 164.706C157.308 177.792 154.761 191.54 154.761 205.94C154.761 220.645 157.308 234.457 162.412 247.39C167.508 260.332 174.652 271.796 183.834 281.788C193.015 291.785 204.017 299.647 216.843 305.379C229.665 311.111 243.798 313.978 259.253 313.978C271.201 313.978 283.081 311.038 294.883 305.159C306.688 299.282 315.796 291.197 322.209 280.904V308.685H369.865V103.186H322.209V130.973ZM317.837 231.076C314.922 239.016 310.841 245.925 305.598 251.804C300.35 257.687 294.009 262.389 286.579 265.917C279.146 269.445 270.905 271.208 261.875 271.208C252.837 271.208 244.676 269.445 237.391 265.917C230.104 262.389 223.839 257.687 218.593 251.804C213.345 245.925 209.335 239.016 206.57 231.076C203.794 223.138 202.417 214.759 202.417 205.942C202.417 197.12 203.794 188.742 206.57 180.804C209.335 172.866 213.345 165.961 218.593 160.078C223.839 154.201 230.102 149.493 237.391 145.965C244.676 142.437 252.837 140.674 261.875 140.674C270.908 140.674 279.146 142.437 286.579 145.965C294.009 149.493 300.35 154.199 305.598 160.078C310.844 165.961 314.922 172.866 317.837 180.804C320.748 188.742 322.209 197.12 322.209 205.942C322.209 214.759 320.748 223.138 317.837 231.076Z" fill="currentColor" /> <path d="M709.568 130.973C703.155 120.684 694.047 112.602 682.242 106.718C670.44 100.84 658.56 97.8969 646.612 97.8969C631.157 97.8969 617.024 100.764 604.202 106.496C591.373 112.228 580.374 120.099 571.193 130.091C562.013 140.088 554.869 151.628 549.771 164.706C544.666 177.792 542.12 191.54 542.12 205.94C542.12 220.645 544.666 234.457 549.771 247.39C554.867 260.332 562.01 271.796 571.193 281.788C580.374 291.785 591.375 299.647 604.202 305.379C617.024 311.111 631.157 313.978 646.612 313.978C658.56 313.978 670.44 311.038 682.242 305.159C694.047 299.282 703.155 291.197 709.568 280.904V308.685H757.224V103.186H709.568V130.973ZM705.198 231.076C702.283 239.016 698.202 245.925 692.959 251.804C687.711 257.687 681.37 262.389 673.94 265.917C666.507 269.445 658.266 271.208 649.236 271.208C640.198 271.208 632.037 269.445 624.752 265.917C617.465 262.389 611.2 257.687 605.954 251.804C600.706 245.925 596.696 239.016 593.931 231.076C591.155 223.138 589.778 214.759 589.778 205.942C589.778 197.12 591.155 188.742 593.931 180.804C596.696 172.866 600.706 165.961 605.954 160.078C611.2 154.201 617.463 149.493 624.752 145.965C632.037 142.437 640.198 140.674 649.236 140.674C658.269 140.674 666.507 142.437 673.94 145.965C681.37 149.493 687.711 154.199 692.959 160.078C698.205 165.961 702.283 172.866 705.198 180.804C708.109 188.742 709.57 197.12 709.57 205.942C709.568 214.759 708.107 223.138 705.198 231.076Z" fill="currentColor" /> <path d="M1280 1.12315e-05H1232.35V308.689H1280V1.12315e-05Z" fill="currentColor" /> <path d="M407.466 308.689H455.117V150.486H536.876V103.192H407.466V308.689Z" fill="currentColor" /> <path d="M948.281 103.192L888.386 260.557L828.489 103.192H780.224L858.441 308.689H918.331L996.546 103.192H948.281Z" fill="currentColor" /> <path d="M1100.48 97.908C1042.13 97.908 995.937 146.279 995.937 205.944C995.937 271.9 1040.64 313.98 1106.59 313.98C1143.5 313.98 1167.06 299.745 1195.85 268.746L1163.66 243.621C1163.64 243.646 1139.36 275.802 1103.1 275.802C1060.96 275.802 1043.22 241.533 1043.22 223.803H1201.32C1209.62 155.913 1165.37 97.908 1100.48 97.908ZM1043.35 188.085C1043.71 184.13 1049.2 136.086 1100.1 136.086C1151.01 136.086 1157.19 184.123 1157.55 188.085H1043.35Z" fill="currentColor" /> </svg> </div> </div> </div> </div> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script> var _gaq=[['_setAccount','UA-23865777-1'],['_trackPageview']]; (function(d,t){ var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; s.parentNode.insertBefore(g,s) }(document,'script')); </script>  <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/45240648.js"></script> </body> </html>