Installation

Installing Nitro

1. Require the package

   Install Nitro with Composer, in a Laravel 13 application:

   Terminal Copy

   composer require nitro/nitro
   

   Laravel finds Nitro by itself: there is no service provider to register and no configuration file to publish. Nitro's endpoint, /_nitro, is ready.

2. Create your layout

   A fresh Laravel app has no layout yet, so create this one. Pages render inside it unless they name another (see Choosing a layout). If your app already has a layout, from a starter kit for example, add the two highlighted lines to it instead.

   resources/views/components/layouts/app.blade.php Copy

   <!DOCTYPE html>
   <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       @nitroHead
   </head>
   <body>
       {{ $slot }}
   
       @nitroScripts
   </body>
   </html>
   

   • @nitroHead, in the <head>, prints the page's <title> and the tags search engines and link previews read (see The page's head).
   • @nitroScripts, just before </body>, loads Nitro in the browser with each component's state. It is what makes the page come alive.

   Nothing happens when you click?

   Without @nitroScripts, the page still shows, because the server rendered it, but nothing in it responds and no error appears. Check that the layout has it, and that the page uses that layout.

3. Check that it works

   Make a page, its class and its view:

   Terminal Copy

   php artisan make:nitro Hello --page
   

   Give the class a property and a method, the view a button, and the page a route:

   app/Nitro/Pages/Hello.php Copy

   <?php
   
   namespace App\Nitro\Pages;
   
   use Nitro\Attributes\Title;
   use Nitro\Component;
   
   #[Title('Hello')]
   class Hello extends Component
   {
       public int $count = 0;
   
       public function increment(): void
       {
           $this->count++;
       }
   }
   

   resources/views/nitro/pages/hello.blade.php Copy

   <div>
       <button nitro:click="increment">Clicked {{ $count }} times</button>
   </div>
   

   routes/web.php Copy

   use App\Nitro\Pages\Hello;
   
   Route::nitro('/hello', Hello::class);
   

   Open /hello and click the button. The number goes up without a reload, and the browser's Network tab shows no request: increment() ran in the browser, compiled from your PHP. The first visit after you change a component takes a moment longer, while Nitro compiles it.

4. Install esbuild, for production

   In development, Nitro needs nothing more: it serves the code it compiles unminified. For production, php artisan nitro:build minifies it with esbuild, which runs on Node. Install it in your app:

   Terminal Copy

   npm install --save-dev esbuild
   

   Without Node or esbuild, nitro:build stops with a message that says which one is missing. If Node isn't on your PATH, set NITRO_NODE in .env to its binary.

5. Publish the configuration (optional)

   Nitro works without a configuration file. When you want to change a default, publish config/nitro.php, and keep only what you change:

   Terminal Copy

   php artisan vendor:publish --tag=nitro-config
   

Where your files go

Nitro has two kinds of classes. Components are parts of a page that you place in a view. Pages are whole screens, with their own route, layout and title.

You can change these directories, namespaces and view paths in config/nitro.php.

Preparing for production

During development, Nitro compiles a component on the first request after you change it. When you deploy, build everything ahead of time instead. The build compiles every component, minifies it, and publishes the files to public/nitro.

php artisan nitro:build

Using Nitro next to Livewire

Nitro and Livewire can run in the same application, and even on the same page. Nitro's tags, attributes, scripts and endpoints all use the nitro: prefix, so they never clash. This means you can move to Nitro one component at a time.