Views - Laravel 11.x - The PHP Framework For Web Artisans

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Views - Laravel 11.x - The PHP Framework For Web Artisans</title> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <link rel="canonical" href="https://laravel.com/docs/11.x/views">  <meta name="title" content="Laravel - 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="Laravel - 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/img/og-image.jpg">  <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://laravel.com/"> <meta property="twitter:title" content="Laravel - 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/img/og-image.jpg">  <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="preconnect" href="https://E3MIRNPJH5-dsn.algolia.net" crossorigin /> <link rel="stylesheet" href="https://use.typekit.net/ins2wgm.css"> <link rel="preload" as="style" href="https://laravel.com/build/assets/app-dc063eeb.css" /><link rel="modulepreload" href="https://laravel.com/build/assets/app-70a5a3a6.js" /><link rel="modulepreload" href="https://laravel.com/build/assets/docs-45166933.js" /><link rel="stylesheet" href="https://laravel.com/build/assets/app-dc063eeb.css" /><script type="module" src="https://laravel.com/build/assets/app-70a5a3a6.js"></script><script type="module" src="https://laravel.com/build/assets/docs-45166933.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; </script> <script> function updateTheme() { if (!('theme' in localStorage)) { localStorage.theme = 'system'; } switch (localStorage.theme) { case 'system': if (window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.classList.add('dark'); document.documentElement.setAttribute('data-theme', 'dark'); } else { document.documentElement.classList.remove('dark'); document.documentElement.setAttribute('data-theme', 'light'); } document.documentElement.setAttribute('color-theme', 'system'); break; case 'dark': document.documentElement.classList.add('dark'); document.documentElement.setAttribute('color-theme', 'dark'); document.documentElement.setAttribute('data-theme', 'dark'); break; case 'light': document.documentElement.classList.remove('dark'); document.documentElement.setAttribute('color-theme', 'light'); document.documentElement.setAttribute('data-theme', 'light'); break; } updateThemeAndSchemeColor(); } function updateThemeAndSchemeColor() { if (! alwaysLightMode) { if (document.documentElement.classList.contains('dark')) { document.querySelector('meta[name="color-scheme"]').setAttribute('content', 'dark'); document.querySelector('meta[name="theme-color"]').setAttribute('content', '#171923'); return; } document.querySelector('meta[name="color-scheme"]').setAttribute('content', 'light'); document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff'); } } updateTheme(); </script> </head> <body x-data="{ navIsOpen: false, }" class="w-full h-full font-sans antialiased text-gray-900 language-php" data-instant-intensity="0" > <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="items-center justify-center bg-gradient-to-b from-red-500 to-red-600 p-2 text-center text-white text-sm h-9"> <template id="news-herd"> <div> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-white" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" stroke-linecap="round" fill="none" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M3 4m0 1a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1z" /> <path d="M7 8v1" /> <path d="M17 8v1" /> <path d="M12.5 4c-.654 1.486 -1.26 3.443 -1.5 9h2.5c-.19 2.867 .094 5.024 .5 7" /> <path d="M7 15.5c3.667 2 6.333 2 10 0" /> </svg> </div> <div class="mt-px ml-1"> Get started with PHP and Laravel faster than ever using <a href="https://herd.laravel.com" class="underline">Laravel Herd</a>. </div> </template> <template id="news-laracon"> <div><svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div> <div class="mt-px ml-1"> Join us in Dallas, TX! Tickets are now available for <a href="https://laracon.us" class="underline">Laracon US</a>. </div> </template> <template id="news-laracon-in"> <div><svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div> <div class="mt-px ml-1"> Let's go to India! Tickets are now available for <a href="https://laracon.in" class="underline">Laracon IN</a>. </div> </template> <template id="news-laracon-eu"> <div><svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div> <div class="mt-px ml-1"> Let's go to Europe! Tickets are now available for <a href="https://laracon.eu" class="underline">Laracon EU</a>. </div> </template> <template id="news-laracon-au"> <div><svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div> <div class="mt-px ml-1"> Let's go down under! Tickets are now available for <a href="https://laracon.au" class="underline">Laracon AU</a>. </div> </template> <template id="news-forge"> <div><svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg></div> <div class="mt-px ml-1"> Servers with PHP 8.3 are now available for provisioning via <a href="https://forge.laravel.com" class="underline">Laravel Forge</a>. </div> </template> <template id="news-vapor"> <div><svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path></svg></div> <div class="mt-px ml-1"> Deploy Laravel with the infinite scale of serverless using <a href="https://vapor.laravel.com" class="underline">Laravel Vapor</a>. </div> </template> <template id="news-cloud"> <div class="mt-px ml-1"> Join the waitlist for <a href="https://cloud.laravel.com" class="underline">Laravel Cloud</a><span class="hidden md:inline">, the future of shipping</span>. </div> </template> <template id="news-nightwatch"> <div class="mt-px ml-1"> Join the waitlist for <a href="https://nightwatch.laravel.com" class="underline">Laravel Nightwatch</a><span class="hidden md:inline">, first-class monitoring designed for Laravel</span>. </div> </template> <template id="news-pulse"> <div><svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path></svg></div> <div class="mt-px ml-1"> How's your health? Check your application's vital signs using <a href="https://pulse.laravel.com" class="underline">Laravel Pulse</a>. </div> </template> <template id="news-reverb"> <div> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-white" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M3.707 6.293l2.586 -2.586a1 1 0 0 1 1.414 0l5.586 5.586a1 1 0 0 1 0 1.414l-2.586 2.586a1 1 0 0 1 -1.414 0l-5.586 -5.586a1 1 0 0 1 0 -1.414z" /> <path d="M6 10l-3 3l3 3l3 -3" /> <path d="M10 6l3 -3l3 3l-3 3" /> <path d="M12 12l1.5 1.5" /> <path d="M14.5 17a2.5 2.5 0 0 0 2.5 -2.5" /> <path d="M15 21a6 6 0 0 0 6 -6" /> </svg> </div> <div class="mt-px ml-1"> Incoming transmission received. <a href="https://reverb.laravel.com" class="underline">Laravel Reverb</a> is now available! </div> </template> <template id="news-nova"> <div> <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path> </svg> </div> <div class="mt-px ml-1"> Take your administration backend to another dimension with <a href="https://nova.laravel.com" class="underline">Laravel Nova</a>. </div> </template> <template id="news-careers"> <div> <svg class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 0 0 .75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 0 0-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0 1 12 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 0 1-.673-.38m0 0A2.18 2.18 0 0 1 3 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 0 1 3.413-.387m7.5 0V5.25A2.25 2.25 0 0 0 13.5 3h-3a2.25 2.25 0 0 0-2.25 2.25v.894m7.5 0a48.667 48.667 0 0 0-7.5 0M12 12.75h.008v.008H12v-.008Z" /> </svg> </div> <div class="mt-px ml-1"> Laravel is hiring! <a href="https://laravel.com/careers" class="underline">Help us build the future of Laravel</a>. </div> </template> </div> <script> const activeNewsTemplate = document.getElementById( 'news-'+JSON.parse('[\u0022cloud\u0022,\u0022nightwatch\u0022]')[Math.floor(Math.random() * 2)] ) activeNewsTemplate.replaceWith(activeNewsTemplate.content) </script> <div class="relative dark:bg-dark-700" id="docsScreen"> <div class="relative lg:flex lg:items-start"> <aside class="hidden fixed top-0 bottom-0 left-0 z-20 w-16 bg-gradient-to-b from-gray-100 to-white transition-all duration-300 lg:sticky lg:w-80 lg:shrink-0 lg:flex lg:flex-col lg:justify-end lg:items-end 2xl:max-w-lg 2xl:w-full dark:from-dark-800 dark:to-dark-700"> <div class="relative max-h-screen overflow-auto flex-1 flex flex-col xl:w-80"> <a href="/" class="flex items-center py-8 px-4 lg:px-8 xl:px-16"> <img class="w-8 h-8 shrink-0 transition-all duration-300 lg:w-12 lg:h-12" src="/img/logomark.min.svg" alt="Laravel" width="50" height="52" > <img src="/img/logotype.min.svg" alt="Laravel" class="hidden ml-4 lg:block" width="114" height="29" > </a> <div class="px-4 pb-10 lg:px-8 xl:px-16"> <nav id="indexed-nav" class="hidden lg:block lg:mt-4"> <div class="docs_sidebar"> <ul> <li> <h2>Prologue</h2> <ul> <li> <a href="/docs/11.x/releases">Release Notes</a> </li> <li> <a href="/docs/11.x/upgrade">Upgrade Guide</a> </li> <li> <a href="/docs/11.x/contributions">Contribution Guide</a> </li> </ul> </li> <li> <h2>Getting Started</h2> <ul> <li> <a href="/docs/11.x/installation">Installation</a> </li> <li> <a href="/docs/11.x/configuration">Configuration</a> </li> <li> <a href="/docs/11.x/structure">Directory Structure</a> </li> <li> <a href="/docs/11.x/frontend">Frontend</a> </li> <li> <a href="/docs/11.x/starter-kits">Starter Kits</a> </li> <li> <a href="/docs/11.x/deployment">Deployment</a> </li> </ul> </li> <li> <h2>Architecture Concepts</h2> <ul> <li> <a href="/docs/11.x/lifecycle">Request Lifecycle</a> </li> <li> <a href="/docs/11.x/container">Service Container</a> </li> <li> <a href="/docs/11.x/providers">Service Providers</a> </li> <li> <a href="/docs/11.x/facades">Facades</a> </li> </ul> </li> <li class="sub--on"> <h2>The Basics</h2> <ul> <li> <a href="/docs/11.x/routing">Routing</a> </li> <li> <a href="/docs/11.x/middleware">Middleware</a> </li> <li> <a href="/docs/11.x/csrf">CSRF Protection</a> </li> <li> <a href="/docs/11.x/controllers">Controllers</a> </li> <li> <a href="/docs/11.x/requests">Requests</a> </li> <li> <a href="/docs/11.x/responses">Responses</a> </li> <li class="active"> <a href="/docs/11.x/views">Views</a> </li> <li> <a href="/docs/11.x/blade">Blade Templates</a> </li> <li> <a href="/docs/11.x/vite">Asset Bundling</a> </li> <li> <a href="/docs/11.x/urls">URL Generation</a> </li> <li> <a href="/docs/11.x/session">Session</a> </li> <li> <a href="/docs/11.x/validation">Validation</a> </li> <li> <a href="/docs/11.x/errors">Error Handling</a> </li> <li> <a href="/docs/11.x/logging">Logging</a> </li> </ul> </li> <li> <h2>Digging Deeper</h2> <ul> <li> <a href="/docs/11.x/artisan">Artisan Console</a> </li> <li> <a href="/docs/11.x/broadcasting">Broadcasting</a> </li> <li> <a href="/docs/11.x/cache">Cache</a> </li> <li> <a href="/docs/11.x/collections">Collections</a> </li> <li> <a href="/docs/11.x/concurrency">Concurrency</a> </li> <li> <a href="/docs/11.x/context">Context</a> </li> <li> <a href="/docs/11.x/contracts">Contracts</a> </li> <li> <a href="/docs/11.x/events">Events</a> </li> <li> <a href="/docs/11.x/filesystem">File Storage</a> </li> <li> <a href="/docs/11.x/helpers">Helpers</a> </li> <li> <a href="/docs/11.x/http-client">HTTP Client</a> </li> <li> <a href="/docs/11.x/localization">Localization</a> </li> <li> <a href="/docs/11.x/mail">Mail</a> </li> <li> <a href="/docs/11.x/notifications">Notifications</a> </li> <li> <a href="/docs/11.x/packages">Package Development</a> </li> <li> <a href="/docs/11.x/processes">Processes</a> </li> <li> <a href="/docs/11.x/queues">Queues</a> </li> <li> <a href="/docs/11.x/rate-limiting">Rate Limiting</a> </li> <li> <a href="/docs/11.x/strings">Strings</a> </li> <li> <a href="/docs/11.x/scheduling">Task Scheduling</a> </li> </ul> </li> <li> <h2>Security</h2> <ul> <li> <a href="/docs/11.x/authentication">Authentication</a> </li> <li> <a href="/docs/11.x/authorization">Authorization</a> </li> <li> <a href="/docs/11.x/verification">Email Verification</a> </li> <li> <a href="/docs/11.x/encryption">Encryption</a> </li> <li> <a href="/docs/11.x/hashing">Hashing</a> </li> <li> <a href="/docs/11.x/passwords">Password Reset</a> </li> </ul> </li> <li> <h2>Database</h2> <ul> <li> <a href="/docs/11.x/database">Getting Started</a> </li> <li> <a href="/docs/11.x/queries">Query Builder</a> </li> <li> <a href="/docs/11.x/pagination">Pagination</a> </li> <li> <a href="/docs/11.x/migrations">Migrations</a> </li> <li> <a href="/docs/11.x/seeding">Seeding</a> </li> <li> <a href="/docs/11.x/redis">Redis</a> </li> <li> <a href="/docs/11.x/mongodb">MongoDB</a> </li> </ul> </li> <li> <h2>Eloquent ORM</h2> <ul> <li> <a href="/docs/11.x/eloquent">Getting Started</a> </li> <li> <a href="/docs/11.x/eloquent-relationships">Relationships</a> </li> <li> <a href="/docs/11.x/eloquent-collections">Collections</a> </li> <li> <a href="/docs/11.x/eloquent-mutators">Mutators / Casts</a> </li> <li> <a href="/docs/11.x/eloquent-resources">API Resources</a> </li> <li> <a href="/docs/11.x/eloquent-serialization">Serialization</a> </li> <li> <a href="/docs/11.x/eloquent-factories">Factories</a> </li> </ul> </li> <li> <h2>Testing</h2> <ul> <li> <a href="/docs/11.x/testing">Getting Started</a> </li> <li> <a href="/docs/11.x/http-tests">HTTP Tests</a> </li> <li> <a href="/docs/11.x/console-tests">Console Tests</a> </li> <li> <a href="/docs/11.x/dusk">Browser Tests</a> </li> <li> <a href="/docs/11.x/database-testing">Database</a> </li> <li> <a href="/docs/11.x/mocking">Mocking</a> </li> </ul> </li> <li> <h2>Packages</h2> <ul> <li> <a href="/docs/11.x/starter-kits#laravel-breeze">Breeze</a> </li> <li> <a href="/docs/11.x/billing">Cashier (Stripe)</a> </li> <li> <a href="/docs/11.x/cashier-paddle">Cashier (Paddle)</a> </li> <li> <a href="/docs/11.x/dusk">Dusk</a> </li> <li> <a href="/docs/11.x/envoy">Envoy</a> </li> <li> <a href="/docs/11.x/fortify">Fortify</a> </li> <li> <a href="/docs/11.x/folio">Folio</a> </li> <li> <a href="/docs/11.x/homestead">Homestead</a> </li> <li> <a href="/docs/11.x/horizon">Horizon</a> </li> <li> <a href="https://jetstream.laravel.com">Jetstream</a> </li> <li> <a href="/docs/11.x/mix">Mix</a> </li> <li> <a href="/docs/11.x/octane">Octane</a> </li> <li> <a href="/docs/11.x/passport">Passport</a> </li> <li> <a href="/docs/11.x/pennant">Pennant</a> </li> <li> <a href="/docs/11.x/pint">Pint</a> </li> <li> <a href="/docs/11.x/precognition">Precognition</a> </li> <li> <a href="/docs/11.x/prompts">Prompts</a> </li> <li> <a href="/docs/11.x/pulse">Pulse</a> </li> <li> <a href="/docs/11.x/reverb">Reverb</a> </li> <li> <a href="/docs/11.x/sail">Sail</a> </li> <li> <a href="/docs/11.x/sanctum">Sanctum</a> </li> <li> <a href="/docs/11.x/scout">Scout</a> </li> <li> <a href="/docs/11.x/socialite">Socialite</a> </li> <li> <a href="/docs/11.x/telescope">Telescope</a> </li> <li> <a href="/docs/11.x/valet">Valet</a> </li> </ul> </li> <li> <a href="/api/11.x">API Documentation</a> </li> </ul> </div> </nav> <template id="promote-forge"> <div class="mt-4 px-3 py-2 border-dashed border-gray-200 border rounded-lg text-xs leading-loose text-gray-700 lg:block dark:border-gray-400 dark:text-gray-200"> <span class="font-medium">Laravel Forge:</span> create and manage PHP 8 servers. Deploy your Laravel applications in seconds. <a class="underline text-red-600" href="https://forge.laravel.com">Sign up now!</a>. </div> </template> <template id="promote-vapor"> <div class="mt-4 px-3 py-2 border-dashed border-gray-200 border rounded-lg text-xs leading-loose text-gray-700 lg:block dark:border-gray-400 dark:text-gray-200"> <span class="font-medium">Laravel Vapor:</span> experience extreme scale on a dedicated serverless platform for Laravel. <a class="underline text-red-600" href="https://vapor.laravel.com">Sign up now!</a>. </div> </template> <template id="promote-nova"> <div class="mt-4 px-3 py-2 border-dashed border-gray-200 border rounded-lg text-xs leading-loose text-gray-700 lg:block dark:border-gray-400 dark:text-gray-200"> <span class="font-medium">Laravel Nova:</span> The next generation of Nova is <a class="underline text-red-600" href="https://nova.laravel.com">now available</a>. </div> </template> <template id="promote-pulse"> <div class="mt-4 px-3 py-2 border-dashed border-gray-200 border rounded-lg text-xs leading-loose text-gray-700 lg:block dark:border-gray-400 dark:text-gray-200"> <span class="font-medium">Laravel Pulse:</span> How's your health? Check your application's vital signs using <a href="https://pulse.laravel.com" class="underline text-red-600">Laravel Pulse</a>. </div> </template> <template id="promote-reverb"> <div class="mt-4 px-3 py-2 border-dashed border-gray-200 border rounded-lg text-xs leading-loose text-gray-700 lg:block dark:border-gray-400 dark:text-gray-200"> <span class="font-medium">Laravel Reverb:</span> You can easily build dynamic, real-time Laravel applications using WebSockets. <a href="https://reverb.laravel.com" class="underline text-red-600">Laravel Reverb</a> is now available! </div> </template> <script> const activePromotionTemplate = document.getElementById( 'promote-'+JSON.parse('[\u0022forge\u0022,\u0022vapor\u0022,\u0022nova\u0022,\u0022pulse\u0022,\u0022reverb\u0022]')[Math.floor(Math.random() * 5)] ) activePromotionTemplate.replaceWith(activePromotionTemplate.content) </script> </div> </div> </aside> <header class="lg:hidden" @keydown.window.escape="navIsOpen = false" @click.away="navIsOpen = false" > <div class="relative mx-auto w-full py-10 bg-white transition duration-200 dark:bg-dark-700"> <div class="mx-auto px-8 sm:px-16 flex items-center justify-between"> <a href="/" class="flex items-center"> <img class="" src="/img/logomark.min.svg" alt="Laravel" width="50" height="52"> <img class="hidden ml-5 sm:block" src="/img/logotype.min.svg" alt="Laravel" width="114" height="29"> </a> <div class="flex-1 flex items-center justify-end"> <button id="header__sun" onclick="toSystemMode()" title="Switch to system theme" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <circle cx="12" cy="12" r="4"></circle> <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path> </svg> </button> <button id="header__moon" onclick="toLightMode()" title="Switch to light mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" /> </svg> </button> <button id="header__indeterminate" onclick="toDarkMode()" title="Switch to dark mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z" /> </svg> </button> <button class="ml-2 relative w-10 h-10 p-2 text-red-600 lg:hidden focus:outline-none focus:shadow-outline" aria-label="Menu" @click.prevent="navIsOpen = !navIsOpen"> <svg x-show="! navIsOpen" x-transition.opacity class="absolute inset-0 mt-2 ml-2 w-6 h-6" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg> <svg x-show="navIsOpen" x-transition.opacity x-cloak class="absolute inset-0 mt-2 ml-2 w-6 h-6" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> </button> </div> </div> <span :class="{ 'shadow-sm': navIsOpen }" class="absolute inset-0 z-20 pointer-events-none"></span> </div> <div x-show="navIsOpen" x-transition:enter="duration-150" x-transition:leave="duration-100 ease-in" x-cloak > <nav x-show="navIsOpen" x-cloak class="absolute w-full transform origin-top shadow-sm z-10" x-transition:enter="duration-150 ease-out" x-transition:enter-start="opacity-0 -translate-y-8 scale-75" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="duration-100 ease-in" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 -translate-y-8 scale-75" > <div class="relative p-8 bg-white docs_sidebar dark:bg-dark-600"> <ul> <li> <h2>Prologue</h2> <ul> <li> <a href="/docs/11.x/releases">Release Notes</a> </li> <li> <a href="/docs/11.x/upgrade">Upgrade Guide</a> </li> <li> <a href="/docs/11.x/contributions">Contribution Guide</a> </li> </ul> </li> <li> <h2>Getting Started</h2> <ul> <li> <a href="/docs/11.x/installation">Installation</a> </li> <li> <a href="/docs/11.x/configuration">Configuration</a> </li> <li> <a href="/docs/11.x/structure">Directory Structure</a> </li> <li> <a href="/docs/11.x/frontend">Frontend</a> </li> <li> <a href="/docs/11.x/starter-kits">Starter Kits</a> </li> <li> <a href="/docs/11.x/deployment">Deployment</a> </li> </ul> </li> <li> <h2>Architecture Concepts</h2> <ul> <li> <a href="/docs/11.x/lifecycle">Request Lifecycle</a> </li> <li> <a href="/docs/11.x/container">Service Container</a> </li> <li> <a href="/docs/11.x/providers">Service Providers</a> </li> <li> <a href="/docs/11.x/facades">Facades</a> </li> </ul> </li> <li class="sub--on"> <h2>The Basics</h2> <ul> <li> <a href="/docs/11.x/routing">Routing</a> </li> <li> <a href="/docs/11.x/middleware">Middleware</a> </li> <li> <a href="/docs/11.x/csrf">CSRF Protection</a> </li> <li> <a href="/docs/11.x/controllers">Controllers</a> </li> <li> <a href="/docs/11.x/requests">Requests</a> </li> <li> <a href="/docs/11.x/responses">Responses</a> </li> <li class="active"> <a href="/docs/11.x/views">Views</a> </li> <li> <a href="/docs/11.x/blade">Blade Templates</a> </li> <li> <a href="/docs/11.x/vite">Asset Bundling</a> </li> <li> <a href="/docs/11.x/urls">URL Generation</a> </li> <li> <a href="/docs/11.x/session">Session</a> </li> <li> <a href="/docs/11.x/validation">Validation</a> </li> <li> <a href="/docs/11.x/errors">Error Handling</a> </li> <li> <a href="/docs/11.x/logging">Logging</a> </li> </ul> </li> <li> <h2>Digging Deeper</h2> <ul> <li> <a href="/docs/11.x/artisan">Artisan Console</a> </li> <li> <a href="/docs/11.x/broadcasting">Broadcasting</a> </li> <li> <a href="/docs/11.x/cache">Cache</a> </li> <li> <a href="/docs/11.x/collections">Collections</a> </li> <li> <a href="/docs/11.x/concurrency">Concurrency</a> </li> <li> <a href="/docs/11.x/context">Context</a> </li> <li> <a href="/docs/11.x/contracts">Contracts</a> </li> <li> <a href="/docs/11.x/events">Events</a> </li> <li> <a href="/docs/11.x/filesystem">File Storage</a> </li> <li> <a href="/docs/11.x/helpers">Helpers</a> </li> <li> <a href="/docs/11.x/http-client">HTTP Client</a> </li> <li> <a href="/docs/11.x/localization">Localization</a> </li> <li> <a href="/docs/11.x/mail">Mail</a> </li> <li> <a href="/docs/11.x/notifications">Notifications</a> </li> <li> <a href="/docs/11.x/packages">Package Development</a> </li> <li> <a href="/docs/11.x/processes">Processes</a> </li> <li> <a href="/docs/11.x/queues">Queues</a> </li> <li> <a href="/docs/11.x/rate-limiting">Rate Limiting</a> </li> <li> <a href="/docs/11.x/strings">Strings</a> </li> <li> <a href="/docs/11.x/scheduling">Task Scheduling</a> </li> </ul> </li> <li> <h2>Security</h2> <ul> <li> <a href="/docs/11.x/authentication">Authentication</a> </li> <li> <a href="/docs/11.x/authorization">Authorization</a> </li> <li> <a href="/docs/11.x/verification">Email Verification</a> </li> <li> <a href="/docs/11.x/encryption">Encryption</a> </li> <li> <a href="/docs/11.x/hashing">Hashing</a> </li> <li> <a href="/docs/11.x/passwords">Password Reset</a> </li> </ul> </li> <li> <h2>Database</h2> <ul> <li> <a href="/docs/11.x/database">Getting Started</a> </li> <li> <a href="/docs/11.x/queries">Query Builder</a> </li> <li> <a href="/docs/11.x/pagination">Pagination</a> </li> <li> <a href="/docs/11.x/migrations">Migrations</a> </li> <li> <a href="/docs/11.x/seeding">Seeding</a> </li> <li> <a href="/docs/11.x/redis">Redis</a> </li> <li> <a href="/docs/11.x/mongodb">MongoDB</a> </li> </ul> </li> <li> <h2>Eloquent ORM</h2> <ul> <li> <a href="/docs/11.x/eloquent">Getting Started</a> </li> <li> <a href="/docs/11.x/eloquent-relationships">Relationships</a> </li> <li> <a href="/docs/11.x/eloquent-collections">Collections</a> </li> <li> <a href="/docs/11.x/eloquent-mutators">Mutators / Casts</a> </li> <li> <a href="/docs/11.x/eloquent-resources">API Resources</a> </li> <li> <a href="/docs/11.x/eloquent-serialization">Serialization</a> </li> <li> <a href="/docs/11.x/eloquent-factories">Factories</a> </li> </ul> </li> <li> <h2>Testing</h2> <ul> <li> <a href="/docs/11.x/testing">Getting Started</a> </li> <li> <a href="/docs/11.x/http-tests">HTTP Tests</a> </li> <li> <a href="/docs/11.x/console-tests">Console Tests</a> </li> <li> <a href="/docs/11.x/dusk">Browser Tests</a> </li> <li> <a href="/docs/11.x/database-testing">Database</a> </li> <li> <a href="/docs/11.x/mocking">Mocking</a> </li> </ul> </li> <li> <h2>Packages</h2> <ul> <li> <a href="/docs/11.x/starter-kits#laravel-breeze">Breeze</a> </li> <li> <a href="/docs/11.x/billing">Cashier (Stripe)</a> </li> <li> <a href="/docs/11.x/cashier-paddle">Cashier (Paddle)</a> </li> <li> <a href="/docs/11.x/dusk">Dusk</a> </li> <li> <a href="/docs/11.x/envoy">Envoy</a> </li> <li> <a href="/docs/11.x/fortify">Fortify</a> </li> <li> <a href="/docs/11.x/folio">Folio</a> </li> <li> <a href="/docs/11.x/homestead">Homestead</a> </li> <li> <a href="/docs/11.x/horizon">Horizon</a> </li> <li> <a href="https://jetstream.laravel.com">Jetstream</a> </li> <li> <a href="/docs/11.x/mix">Mix</a> </li> <li> <a href="/docs/11.x/octane">Octane</a> </li> <li> <a href="/docs/11.x/passport">Passport</a> </li> <li> <a href="/docs/11.x/pennant">Pennant</a> </li> <li> <a href="/docs/11.x/pint">Pint</a> </li> <li> <a href="/docs/11.x/precognition">Precognition</a> </li> <li> <a href="/docs/11.x/prompts">Prompts</a> </li> <li> <a href="/docs/11.x/pulse">Pulse</a> </li> <li> <a href="/docs/11.x/reverb">Reverb</a> </li> <li> <a href="/docs/11.x/sail">Sail</a> </li> <li> <a href="/docs/11.x/sanctum">Sanctum</a> </li> <li> <a href="/docs/11.x/scout">Scout</a> </li> <li> <a href="/docs/11.x/socialite">Socialite</a> </li> <li> <a href="/docs/11.x/telescope">Telescope</a> </li> <li> <a href="/docs/11.x/valet">Valet</a> </li> </ul> </li> <li> <a href="/api/11.x">API Documentation</a> </li> </ul> </div> </nav> </div> </header> <section class="flex-1 dark:bg-dark-700"> <div class="max-w-screen-lg px-8 sm:px-16 lg:px-24"> <div class="flex flex-col items-end border-b border-gray-200 py-1 transition-colors dark:border-gray-700 lg:mt-8 lg:flex-row-reverse"> <div class="hidden lg:flex items-center justify-center ml-8"> <button id="header__sun" onclick="toSystemMode()" title="Switch to system theme" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <circle cx="12" cy="12" r="4"></circle> <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path> </svg> </button> <button id="header__moon" onclick="toLightMode()" title="Switch to light mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" /> </svg> </button> <button id="header__indeterminate" onclick="toDarkMode()" title="Switch to dark mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z" /> </svg> </button> </div> <div class="w-full lg:w-40 lg:pl-12"> <div> <label class="text-gray-600 text-xs tracking-widest uppercase dark:text-gray-500" for="version-switcher">Version</label> <div x-data class="relative w-full bg-white transition-all duration-500 focus-within:border-gray-600 dark:bg-gray-800"> <select id="version-switcher" aria-label="Laravel version" class="appearance-none flex-1 w-full px-0 py-1 placeholder-gray-900 tracking-wide bg-white border-transparent focus:outline-none dark:bg-dark-700 dark:text-gray-400 dark:placeholder-gray-500" @change="window.location = $event.target.value" > <option value="https://laravel.com/docs/master/views">Master</option> <option selected value="https://laravel.com/docs/11.x/views">11.x</option> <option value="https://laravel.com/docs/10.x/views">10.x</option> <option value="https://laravel.com/docs/9.x/views">9.x</option> <option value="https://laravel.com/docs/8.x/views">8.x</option> <option value="https://laravel.com/docs/7.x/views">7.x</option> <option value="https://laravel.com/docs/6.x/views">6.x</option> <option value="https://laravel.com/docs/5.8/views">5.8</option> <option value="https://laravel.com/docs/5.7/views">5.7</option> <option value="https://laravel.com/docs/5.6/views">5.6</option> <option value="https://laravel.com/docs/5.5/views">5.5</option> <option value="https://laravel.com/docs/5.4/views">5.4</option> <option value="https://laravel.com/docs/5.3/views">5.3</option> <option value="https://laravel.com/docs/5.2/views">5.2</option> <option value="https://laravel.com/docs/5.1/views">5.1</option> <option value="https://laravel.com/docs/5.0/views">5.0</option> <option value="https://laravel.com/docs/4.2/views">4.2</option> </select> <img class="absolute inset-y-0 right-0 mt-2.5 w-2.5 h-2.5 text-gray-900 pointer-events-none dark:hidden" src="/img/icons/drop_arrow.min.svg" alt="" width="10" height="10"> <img class="absolute inset-y-0 right-0 mt-2.5 w-2.5 h-2.5 text-gray-900 pointer-events-none hidden dark:block" src="/img/icons/drop_arrow.dark.min.svg" alt="" width="10" height="10"> </div> </div> </div> <div class="relative mt-8 flex items-center justify-end w-full h-10 lg:mt-0"> <div class="flex-1 flex items-center"> <button id="docsearch" class="text-gray-800 transition-colors dark:text-gray-400 w-full"></button> </div> </div> </div> <section class="mt-8 md:mt-16"> <section class="docs_main max-w-prose"> <div id="main-content"> <h1>Views</h1> <ul> <li> <a href="#introduction">Introduction</a> <ul> <li> <a href="#writing-views-in-react-or-vue">Writing Views in React / Vue</a> </li> </ul> </li> <li> <a href="#creating-and-rendering-views">Creating and Rendering Views</a> <ul> <li> <a href="#nested-view-directories">Nested View Directories</a> </li> <li> <a href="#creating-the-first-available-view">Creating the First Available View</a> </li> <li> <a href="#determining-if-a-view-exists">Determining if a View Exists</a> </li> </ul> </li> <li> <a href="#passing-data-to-views">Passing Data to Views</a> <ul> <li> <a href="#sharing-data-with-all-views">Sharing Data With All Views</a> </li> </ul> </li> <li> <a href="#view-composers">View Composers</a> <ul> <li> <a href="#view-creators">View Creators</a> </li> </ul> </li> <li> <a href="#optimizing-views">Optimizing Views</a> </li> </ul> <h2 id="introduction"><a href="#introduction">Introduction</a></h2> <p>Of course, it's not practical to return entire HTML documents strings directly from your routes and controllers. Thankfully, views provide a convenient way to place all of our HTML in separate files.</p> <p>Views separate your controller / application logic from your presentation logic and are stored in the <code>resources/views</code> directory. When using Laravel, view templates are usually written using the <a href="/docs/11.x/blade">Blade templating language</a>. A simple view might look something like this:</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: #697098;"></span></div><div class='line'> </div><div class='line'><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">html</span><span style="color: #89DDFF;">></span></div><div class='line'><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: #BFC7D5;"> </span><span style="color: #89DDFF;"><</span><span style="color: #FF5572;">h1</span><span style="color: #89DDFF;">></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: #FF5572;">h1</span><span style="color: #89DDFF;">></span></div><div class='line'><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: #89DDFF;"></</span><span style="color: #FF5572;">html</span><span style="color: #89DDFF;">></span></div></code></pre> </div> <p>Since this view is stored at <code>resources/views/greeting.blade.php</code>, we may return it using the global <code>view</code> helper like so:</p> <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: #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: #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;">James</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">]);</span></div><div class='line'><span style="color: #BFC7D5;">});</span></div></code></pre> <div class="mb-10 max-w-2xl mx-auto px-4 py-8 shadow-lg lg:flex lg:items-center callout"> <div class="w-20 h-20 mb-6 flex items-center justify-center shrink-0 lg:mb-0 bg-purple-600"> <div class="opacity-75"><svg width="28" height="40" viewBox="0 0 28 40" xmlns="http://www.w3.org/2000/svg"><title>lightbulb</title><path d="M12 28h4v-8h-4v8zM8 40h12v-8H8v8zm13.98-14.52c-1.001.705-1.661 1.545-1.98 2.52H8c-.416-.959-1.076-1.799-1.98-2.52A13.99 13.99 0 0 1 0 14C0 6.272 6.272 0 14 0s14 6.272 14 14a13.99 13.99 0 0 1-6.02 11.48z" fill="#FFF" fill-rule="nonzero"/></svg></div> </div> <p class="mb-0 lg:ml-6 callout"> Looking for more information on how to write Blade templates? Check out the full <a href="/docs/11.x/blade">Blade documentation</a> to get started.</p> </div> <h3 id="writing-views-in-react-or-vue"><a href="#writing-views-in-react-or-vue">Writing Views in React / Vue</a></h3> <p>Instead of writing their frontend templates in PHP via Blade, many developers have begun to prefer to write their templates using React or Vue. Laravel makes this painless thanks to <a href="https://inertiajs.com/">Inertia</a>, a library that makes it a cinch to tie your React / Vue frontend to your Laravel backend without the typical complexities of building an SPA.</p> <p>Our Breeze and Jetstream <a href="/docs/11.x/starter-kits">starter kits</a> give you a great starting point for your next Laravel application powered by Inertia. In addition, the <a href="https://bootcamp.laravel.com">Laravel Bootcamp</a> provides a full demonstration of building a Laravel application powered by Inertia, including examples in Vue and React.</p> <h2 id="creating-and-rendering-views"><a href="#creating-and-rendering-views">Creating and Rendering Views</a></h2> <p>You may create a view by placing a file with the <code>.blade.php</code> extension in your application's <code>resources/views</code> directory or by using the <code>make:view</code> Artisan 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: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">make:view</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">greeting</span></div></code></pre> </div> <p>The <code>.blade.php</code> extension informs the framework that the file contains a <a href="/docs/11.x/blade">Blade template</a>. Blade templates contain HTML as well as Blade directives that allow you to easily echo values, create "if" statements, iterate over data, and more.</p> <p>Once you have created a view, you may return it from one of your application's routes or controllers using the global <code>view</code> helper:</p> <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: #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: #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;">James</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">]);</span></div><div class='line'><span style="color: #BFC7D5;">});</span></div></code></pre> <p>Views may also be returned using the <code>View</code> facade:</p> <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: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">View</span><span style="color: #BFC7D5;">;</span></div><div class='line'> </div><div class='line'><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">View</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">make</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: #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;">James</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">]);</span></div></code></pre> <p>As you can see, the first argument passed to the <code>view</code> helper corresponds to the name of the view file in the <code>resources/views</code> directory. The second argument is an array of data that should be made available to the view. In this case, we are passing the <code>name</code> variable, which is displayed in the view using <a href="/docs/11.x/blade">Blade syntax</a>.</p> <h3 id="nested-view-directories"><a href="#nested-view-directories">Nested View Directories</a></h3> <p>Views may also be nested within subdirectories of the <code>resources/views</code> directory. "Dot" notation may be used to reference nested views. For example, if your view is stored at <code>resources/views/admin/profile.blade.php</code>, you may return it from one of your application's routes / controllers like so:</p> <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: #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;">admin.profile</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;">data</span><span style="color: #BFC7D5;">);</span></div></code></pre> <div class="mb-10 max-w-2xl mx-auto px-4 py-8 shadow-lg lg:flex lg:items-center callout"> <div class="w-20 h-20 mb-6 flex items-center justify-center shrink-0 lg:mb-0 bg-red-600"> <div class="opacity-75"><svg width="6" height="35" viewBox="0 0 6 35" xmlns="http://www.w3.org/2000/svg"><title>exclamation</title><path d="M0 29h6v6H0v-6zM0 0h6v24H0V0z" fill="#FFF" fill-rule="nonzero"/></svg> </div> </div> <p class="mb-0 lg:ml-6 callout"> View directory names should not contain the <code>.</code> character.</p> </div> <h3 id="creating-the-first-available-view"><a href="#creating-the-first-available-view">Creating the First Available View</a></h3> <p>Using the <code>View</code> facade's <code>first</code> method, you may create the first view that exists in a given array of views. This may be useful if your application or package allows views to be customized or overwritten:</p> <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: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">View</span><span style="color: #BFC7D5;">;</span></div><div class='line'> </div><div class='line'><span style="color: #C792EA;">return</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">View</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">first</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: #BEC5D4;">$data</span><span style="color: #BFC7D5;">);</span></div></code></pre> <h3 id="determining-if-a-view-exists"><a href="#determining-if-a-view-exists">Determining if a View Exists</a></h3> <p>If you need to determine if a view exists, you may use the <code>View</code> facade. The <code>exists</code> method will return <code>true</code> if the view exists:</p> <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: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">View</span><span style="color: #BFC7D5;">;</span></div><div class='line'> </div><div class='line'><span style="color: #C792EA;">if</span><span style="color: #BFC7D5;"> (</span><span style="color: #FFCB8B;">View</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">exists</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">admin.profile</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)) {</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color: #BFC7D5;">}</span></div></code></pre> <h2 id="passing-data-to-views"><a href="#passing-data-to-views">Passing Data to Views</a></h2> <p>As you saw in the previous examples, you may pass an array of data to views to make that data available to the view:</p> <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: #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;">greetings</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;">Victoria</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">]);</span></div></code></pre> <p>When passing information in this manner, the data should be an array with key / value pairs. After providing data to a view, you can then access each value within your view using the data's keys, such as <code><?php echo $name; ?></code>.</p> <p>As an alternative to passing a complete array of data to the <code>view</code> helper function, you may use the <code>with</code> method to add individual pieces of data to the view. The <code>with</code> method returns an instance of the view object so that you can continue chaining methods before returning the view:</p> <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: #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></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">with</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;">Victoria</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">)</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">with</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">occupation</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">Astronaut</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div></code></pre> <h3 id="sharing-data-with-all-views"><a href="#sharing-data-with-all-views">Sharing Data With All Views</a></h3> <p>Occasionally, you may need to share data with all views that are rendered by your application. You may do so using the <code>View</code> facade's <code>share</code> method. Typically, you should place calls to the <code>share</code> method within a service provider's <code>boot</code> method. You are free to add them to the <code>App\Providers\AppServiceProvider</code> class or generate a separate service provider to house them:</p> <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: #D3423E;"><?php</span></div><div class='line'> </div><div class='line'><span style="color: #C792EA;">namespace</span><span style="color: #BFC7D5;"> App\Providers;</span></div><div class='line'> </div><div class='line'><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">View</span><span style="color: #BFC7D5;">;</span></div><div class='line'> </div><div class='line'><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: #BFC7D5;">{</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color: #697098;"> * Register any application services.</span></div><div class='line'><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><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: #BFC7D5;"> {</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color: #BFC7D5;"> }</span></div><div class='line'> </div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color: #697098;"> * Bootstrap any application services.</span></div><div class='line'><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><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: #BFC7D5;"> {</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">View</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">share</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">key</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">value</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">);</span></div><div class='line'><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color: #BFC7D5;">}</span></div></code></pre> <h2 id="view-composers"><a href="#view-composers">View Composers</a></h2> <p>View composers are callbacks or class methods that are called when a view is rendered. If you have data that you want to be bound to a view each time that view is rendered, a view composer can help you organize that logic into a single location. View composers may prove particularly useful if the same view is returned by multiple routes or controllers within your application and always needs a particular piece of data.</p> <p>Typically, view composers will be registered within one of your application's <a href="/docs/11.x/providers">service providers</a>. In this example, we'll assume that the <code>App\Providers\AppServiceProvider</code> will house this logic.</p> <p>We'll use the <code>View</code> facade's <code>composer</code> method to register the view composer. Laravel does not include a default directory for class based view composers, so you are free to organize them however you wish. For example, you could create an <code>app/View/Composers</code> directory to house all of your application's view composers:</p> <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: #D3423E;"><?php</span></div><div class='line'> </div><div class='line'><span style="color: #C792EA;">namespace</span><span style="color: #BFC7D5;"> App\Providers;</span></div><div class='line'> </div><div class='line'><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> App\View\Composers\</span><span style="color: #FFCB8B;">ProfileComposer</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\</span><span style="color: #FFCB8B;">Facades</span><span style="color: #BFC7D5;">;</span></div><div class='line'><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: #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'> </div><div class='line'><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: #BFC7D5;">{</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color: #697098;"> * Register any application services.</span></div><div class='line'><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><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: #BFC7D5;"> {</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color: #BFC7D5;"> }</span></div><div class='line'> </div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color: #697098;"> * Bootstrap any application services.</span></div><div class='line'><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><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: #BFC7D5;"> {</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> Using class based composers...</span></div><div class='line'><span style="color: #BFC7D5;"> Facades\</span><span style="color: #FFCB8B;">View</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">composer</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">profile</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #FFCB8B;">ProfileComposer</span><span style="color: #89DDFF;">::</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;">);</span></div><div class='line'> </div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> Using closure based composers...</span></div><div class='line'><span style="color: #BFC7D5;"> Facades\</span><span style="color: #FFCB8B;">View</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">composer</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: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">View</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$view</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color: #BFC7D5;"> });</span></div><div class='line'> </div><div class='line'><span style="color: #BFC7D5;"> Facades\</span><span style="color: #FFCB8B;">View</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">composer</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: #C792EA;">function</span><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">View</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$view</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color: #BFC7D5;"> });</span></div><div class='line'><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color: #BFC7D5;">}</span></div></code></pre> <p>Now that we have registered the composer, the <code>compose</code> method of the <code>App\View\Composers\ProfileComposer</code> class will be executed each time the <code>profile</code> view is being rendered. Let's take a look at an example of the composer class:</p> <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: #D3423E;"><?php</span></div><div class='line'> </div><div class='line'><span style="color: #C792EA;">namespace</span><span style="color: #BFC7D5;"> App\View\Composers;</span></div><div class='line'> </div><div class='line'><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> App\Repositories\</span><span style="color: #FFCB8B;">UserRepository</span><span style="color: #BFC7D5;">;</span></div><div class='line'><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'> </div><div class='line'><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB6B;">ProfileComposer</span></div><div class='line'><span style="color: #BFC7D5;">{</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color: #697098;"> * Create a new profile composer.</span></div><div class='line'><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><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: #BFC7D5;"> </span><span style="color: #C792EA;">protected</span><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">UserRepository</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$users</span><span style="color: #BFC7D5;">,</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {}</span></div><div class='line'> </div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">/**</span></div><div class='line'><span style="color: #697098;"> * Bind data to the view.</span></div><div class='line'><span style="color: #697098;"> </span><span style="color: #697098;">*/</span></div><div class='line'><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;">compose</span><span style="color: #D9F5DD;">(</span><span style="color: #FFCB8B;">View</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$view</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: #BFC7D5;"> {</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$view</span><span style="color: #89DDFF;">-></span><span style="color: #82AAFF;">with</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">count</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #FF5572;">$this</span><span style="color: #89DDFF;">->users-></span><span style="color: #82AAFF;">count</span><span style="color: #BFC7D5;">());</span></div><div class='line'><span style="color: #BFC7D5;"> }</span></div><div class='line'><span style="color: #BFC7D5;">}</span></div></code></pre> <p>As you can see, all view composers are resolved via the <a href="/docs/11.x/container">service container</a>, so you may type-hint any dependencies you need within a composer's constructor.</p> <h4 id="attaching-a-composer-to-multiple-views"><a href="#attaching-a-composer-to-multiple-views">Attaching a Composer to Multiple Views</a></h4> <p>You may attach a view composer to multiple views at once by passing an array of views as the first argument to the <code>composer</code> method:</p> <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: #C792EA;">use</span><span style="color: #BFC7D5;"> App\Views\Composers\</span><span style="color: #FFCB8B;">MultiComposer</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">View</span><span style="color: #BFC7D5;">;</span></div><div class='line'> </div><div class='line'><span style="color: #FFCB8B;">View</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">composer</span><span style="color: #BFC7D5;">(</span></div><div class='line'><span style="color: #BFC7D5;"> [</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">profile</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 class='line'><span style="color: #BFC7D5;"> </span><span style="color: #FFCB8B;">MultiComposer</span><span style="color: #89DDFF;">::</span><span style="color: #C792EA;">class</span></div><div class='line'><span style="color: #BFC7D5;">);</span></div></code></pre> <p>The <code>composer</code> method also accepts the <code>*</code> character as a wildcard, allowing you to attach a composer to all views:</p> <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: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\</span><span style="color: #FFCB8B;">Facades</span><span style="color: #BFC7D5;">;</span></div><div class='line'><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'> </div><div class='line'><span style="color: #BFC7D5;">Facades\</span><span style="color: #FFCB8B;">View</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">composer</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: #FFCB8B;">View</span><span style="color: #BFC7D5;"> </span><span style="color: #BEC5D4;">$view</span><span style="color: #D9F5DD;">)</span><span style="color: #BFC7D5;"> {</span></div><div class='line'><span style="color: #BFC7D5;"> </span><span style="color: #697098;">//</span><span style="color: #697098;"> ...</span></div><div class='line'><span style="color: #BFC7D5;">});</span></div></code></pre> <h3 id="view-creators"><a href="#view-creators">View Creators</a></h3> <p>View "creators" are very similar to view composers; however, they are executed immediately after the view is instantiated instead of waiting until the view is about to render. To register a view creator, use the <code>creator</code> method:</p> <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: #C792EA;">use</span><span style="color: #BFC7D5;"> App\View\Creators\</span><span style="color: #FFCB8B;">ProfileCreator</span><span style="color: #BFC7D5;">;</span></div><div class='line'><span style="color: #C792EA;">use</span><span style="color: #BFC7D5;"> Illuminate\Support\Facades\</span><span style="color: #FFCB8B;">View</span><span style="color: #BFC7D5;">;</span></div><div class='line'> </div><div class='line'><span style="color: #FFCB8B;">View</span><span style="color: #89DDFF;">::</span><span style="color: #82AAFF;">creator</span><span style="color: #BFC7D5;">(</span><span style="color: #D9F5DD;">'</span><span style="color: #C3E88D;">profile</span><span style="color: #D9F5DD;">'</span><span style="color: #BFC7D5;">, </span><span style="color: #FFCB8B;">ProfileCreator</span><span style="color: #89DDFF;">::</span><span style="color: #C792EA;">class</span><span style="color: #BFC7D5;">);</span></div></code></pre> <h2 id="optimizing-views"><a href="#optimizing-views">Optimizing Views</a></h2> <p>By default, Blade template views are compiled on demand. When a request is executed that renders a view, Laravel will determine if a compiled version of the view exists. If the file exists, Laravel will then determine if the uncompiled view has been modified more recently than the compiled view. If the compiled view either does not exist, or the uncompiled view has been modified, Laravel will recompile the view.</p> <p>Compiling views during the request may have a small negative impact on performance, so Laravel provides the <code>view:cache</code> Artisan command to precompile all of the views utilized by your application. For increased performance, you may wish to run this command as part of your deployment process:</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: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">view:cache</span></div></code></pre> </div> <p>You may use the <code>view:clear</code> command to clear the view cache:</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: #BFC7D5;">php </span><span style="color: #BFC7D5;">artisan</span><span style="color: #BFC7D5;"> </span><span style="color: #BFC7D5;">view:clear</span></div></code></pre> </div> <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYILK3E&placement=laravelcom" id="_carbonads_js"></script> </div> </section> </section> </div> </section> </div> </div> <footer class="relative pt-12 dark:bg-dark-700"> <div class="max-w-screen-2xl mx-auto w-full px-8"> <div> <a href="/" class="inline-flex"> <img class="w-16 h-16" src="/img/logomark.min.svg" alt="Laravel" width="64" height="64" loading="lazy"> </a> </div> <div class="mt-6 grid grid-cols-12 md:gap-x-8 gap-y-12 sm:mt-12"> <div class="col-span-12 lg:col-span-4"> <p class="max-w-sm text-xs text-gray-700 sm:text-sm dark:text-gray-500"> Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel attempts to take the pain out of development by easing common tasks used in most web projects.</p> <ul class="mt-6 flex items-center space-x-3"> <li> <a href="https://x.com/laravelphp"> <img class="hidden dark:inline-block w-6 h-6" src="/img/social/x.dark.min.svg" alt="X" width="24" height="20" loading="lazy"> <img class="inline-block dark:hidden w-6 h-6" src="/img/social/x.min.svg" alt="X" width="24" height="20" loading="lazy"> </a> </li> <li> <a href="https://github.com/laravel"> <img class="hidden dark:inline-block w-6 h-6" src="/img/social/github.dark.min.svg" alt="GitHub" width="24" height="24" loading="lazy"> <img class="inline-block dark:hidden w-6 h-6" src="/img/social/github.min.svg" alt="GitHub" width="24" height="24" loading="lazy"> </a> </li> <li> <a href="https://discord.gg/laravel"> <img class="hidden dark:inline-block w-6 h-6" src="/img/social/discord.dark.min.svg" alt="Discord" width="21" height="24" loading="lazy"> <img class="inline-block dark:hidden w-6 h-6" src="/img/social/discord.min.svg" alt="Discord" width="21" height="24" loading="lazy"> </a> </li> <li> <a href="https://www.youtube.com/laravelphp"> <img class="hidden dark:inline-block w-6 h-6" src="/img/social/youtube.dark.min.svg" alt="YouTube" width="169" height="150" loading="lazy"> <img class="inline-block dark:hidden w-6 h-6" src="/img/social/youtube.min.svg" alt="YouTube" width="169" height="150" loading="lazy"> </a> </li> </ul> </div> <div class="text-xs col-span-6 md:col-span-3 lg:col-span-2"> <span class="uppercase dark:text-gray-200">Highlights</span> <div class="mt-5"> <ul class="space-y-3 text-gray-700 dark:text-gray-500"> <li> <a href="/docs/11.x/releases" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Release Notes</a> </li> <li> <a href="/docs/11.x/installation" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Getting Started</a> </li> <li> <a href="/docs/11.x/routing" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Routing</a> </li> <li> <a href="/docs/11.x/blade" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Blade Templates</a> </li> <li> <a href="/docs/11.x/authentication" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Authentication</a> </li> <li> <a href="/docs/11.x/authorization" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Authorization</a> </li> <li> <a href="/docs/11.x/artisan" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Artisan Console</a> </li> <li> <a href="/docs/11.x/database" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Database</a> </li> <li> <a href="/docs/11.x/eloquent" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Eloquent ORM</a> </li> <li> <a href="/docs/11.x/testing" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Testing</a> </li> </ul> </div> </div> <div class="text-xs col-span-6 md:col-span-3 lg:col-span-2"> <span class="uppercase dark:text-gray-200">Resources</span> <div class="mt-5"> <ul class="space-y-3 text-gray-700 dark:text-gray-500"> <li> <a href="https://bootcamp.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Laravel Bootcamp</a> </li> <li> <a href="https://laracasts.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Laracasts</a> </li> <li> <a href="https://laravel-news.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Laravel News</a> </li> <li> <a href="https://laracon.us" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Laracon</a> </li> <li> <a href="https://laracon.au" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Laracon AU</a> </li> <li> <a href="https://laracon.eu/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Laracon EU</a> </li> <li> <a href="https://laracon.in/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Laracon India</a> </li> <li> <a href="https://larabelles.com/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Larabelles</a> </li> <li> <a href="https://laravel.com/careers" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Careers</a> </li> <li> <a href="https://larajobs.com/?partner=5" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Jobs</a> </li> <li> <a href="https://laracasts.com/discuss" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Forums</a> </li> <li> <a href="/trademark" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Trademark</a> </li> </ul> </div> </div> <div class="text-xs col-span-6 md:col-span-3 lg:col-span-2"> <span class="uppercase dark:text-gray-200">Partners</span> <div class="mt-5"> <ul class="space-y-3 text-gray-700 dark:text-gray-500"> <li> <a href="https://vehikl.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Vehikl</a> </li> <li> <a href="https://webreinvent.com/?utm_source=laravel&utm_medium=laravel.com&utm_campaign=footer-link" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">WebReinvent</a> </li> <li> <a href="https://tighten.co" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Tighten</a> </li> <li> <a href="https://www.bacancytechnology.com/hire-laravel-developer?utm_source=laravel&utm_medium=partners.laravel&utm_campaign=sponsors" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Bacancy</a> </li> <li> <a href="https://64robots.com/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">64 Robots</a> </li> <li> <a href="https://activelogic.com/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Active Logic</a> </li> <li> <a href="https://www.blackairplane.com/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Black Airplane</a> </li> <li> <a href="https://www.byte5.net/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Byte 5</a> </li> <li> <a href="https://www.curotec.com/services/technologies/laravel/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Curotec</a> </li> <li> <a href="https://www.cyber-duck.co.uk/how-we-work/technology/laravel?utm_source=Laravel%20Partner&utm_medium=Sponsorship" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Cyber-Duck</a> </li> <li> <a href="https://devsquad.com/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">DevSquad</a> </li> <li> <a href="https://jump24.co.uk/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Jump24</a> </li> <li> <a href="https://kirschbaumdevelopment.com/" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Kirschbaum</a> </li> </ul> </div> </div> <div class="text-xs col-span-6 md:col-span-3 lg:col-span-2"> <span class="uppercase dark:text-gray-200">Ecosystem</span> <div class="mt-5"> <ul class="space-y-3 text-gray-700 dark:text-gray-500"> <li> <a href="/docs/11.x/starter-kits#laravel-breeze" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Breeze</a> </li> <li> <a href="/docs/11.x/billing" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Cashier</a> </li> <li> <a href="/docs/11.x/dusk" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Dusk</a> </li> <li> <a href="/docs/11.x/broadcasting" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Echo</a> </li> <li> <a href="https://envoyer.io" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Envoyer</a> </li> <li> <a href="https://forge.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Forge</a> </li> <li> <a href="https://herd.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Herd</a> </li> <li> <a href="/docs/11.x/horizon" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Horizon</a> </li> <li> <a href="https://inertiajs.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Inertia</a> </li> <li> <a href="https://jetstream.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Jetstream</a> </li> <li> <a href="https://livewire.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Livewire</a> </li> <li> <a href="https://nova.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Nova</a> </li> <li> <a href="/docs/11.x/octane" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Octane</a> </li> <li> <a href="/docs/11.x/pennant" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Pennant</a> </li> <li> <a href="/docs/11.x/pint" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Pint</a> </li> <li> <a href="/docs/11.x/prompts" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Prompts</a> </li> <li> <a href="https://pulse.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Pulse</a> </li> <li> <a href="https://reverb.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Reverb</a> </li> <li> <a href="/docs/11.x/sail" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Sail</a> </li> <li> <a href="/docs/11.x/sanctum" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Sanctum</a> </li> <li> <a href="/docs/11.x/scout" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Scout</a> </li> <li> <a href="/docs/11.x/socialite" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Socialite</a> </li> <li> <a href="https://spark.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Spark</a> </li> <li> <a href="/docs/11.x/telescope" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Telescope</a> </li> <li> <a href="https://vapor.laravel.com" class="transition-colors hover:text-gray-600 dark:hover:text-gray-400">Vapor</a> </li> </ul> </div> </div> </div> <div class="mt-10 border-t pt-6 pb-16 border-gray-200 dark:border-dark-500"> <p class="text-xs text-gray-700 dark:text-gray-400"> Laravel is a Trademark of Laravel Holdings Inc.<br /> Copyright © 2011-2024 Laravel Holdings Inc. </p> <p class="mt-6 text-xs text-gray-700 dark:text-gray-400"> Code highlighting provided by <a href="https://torchlight.dev">Torchlight</a> </p> </div> </div> </footer> <script> var algolia_app_id = 'E3MIRNPJH5'; var algolia_search_key = '1fa3a8fec06eb1858d6ca137211225c0'; var version = '11.x'; </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> <div class="fixed"> <input type="text"> </div> </body> </html>

CINXE.COM

Views - Laravel 11.x - The PHP Framework For Web Artisans