Upgrading | laravel-dashboard | Spatie

 SPATIE

  Laravel Dashboard
====================

spatie.be/open-source

  [Docs](https://spatie.be/docs)  [Laravel-dashboard](https://spatie.be/docs/laravel-dashboard/v4)  Upgrading

 Version   v4   v3   v2   v1

 Other versions for crawler [v4](https://spatie.be/docs/laravel-dashboard/v4) [v3](https://spatie.be/docs/laravel-dashboard/v3) [v2](https://spatie.be/docs/laravel-dashboard/v2) [v1](https://spatie.be/docs/laravel-dashboard/v1)

  Upgrading
- [ Introduction ](https://spatie.be/docs/laravel-dashboard/v4/introduction)
- [ Support us ](https://spatie.be/docs/laravel-dashboard/v4/support-us)
- [ Requirements ](https://spatie.be/docs/laravel-dashboard/v4/requirements)
- [ Installation & setup ](https://spatie.be/docs/laravel-dashboard/v4/installation-setup)
- [ Upgrading ](https://spatie.be/docs/laravel-dashboard/v4/upgrading)
- [ Questions and issues ](https://spatie.be/docs/laravel-dashboard/v4/questions-issues)
- [ Changelog ](https://spatie.be/docs/laravel-dashboard/v4/changelog)
- [ About us ](https://spatie.be/docs/laravel-dashboard/v4/about-us)

Usage
-----

- [ Creating your first dashboard ](https://spatie.be/docs/laravel-dashboard/v4/basic-usage/creating-your-first-dashboard)
- [ Positioning tiles ](https://spatie.be/docs/laravel-dashboard/v4/basic-usage/positioning-tiles)
- [ Customizing the views ](https://spatie.be/docs/laravel-dashboard/v4/basic-usage/customizing-the-views)

Adding tiles
------------

- [ Overview ](https://spatie.be/docs/laravel-dashboard/v4/adding-tiles/overview)
- [ Creating your own tile ](https://spatie.be/docs/laravel-dashboard/v4/adding-tiles/creating-your-own-tile)
- [ Google calendar tile ](https://spatie.be/docs/laravel-dashboard/v4/adding-tiles/google-calendar)
- [ Time and Weather tile ](https://spatie.be/docs/laravel-dashboard/v4/adding-tiles/time-weather)
- [ Oh Dear Uptime tile ](https://spatie.be/docs/laravel-dashboard/v4/adding-tiles/oh-dear-uptime)
- [ Velo tile ](https://spatie.be/docs/laravel-dashboard/v4/adding-tiles/velo)
- [ Belgian trains tile ](https://spatie.be/docs/laravel-dashboard/v4/adding-tiles/belgian-trains)
- [ Attendances tile ](https://spatie.be/docs/laravel-dashboard/v4/adding-tiles/attendances)

 Upgrading
=========

###  On this page

1. [ From v3 to v4 ](#content-from-v3-to-v4)
2. [ From v2 to v3 ](#content-from-v2-to-v3)

From v3 to v4
-----------------------------------------------------------------------------------------------

### Requirements

- PHP 8.3+
- Laravel 11+
- Livewire 4

### Theme and Mode enums

`Dashboard::getTheme()` now returns a `Spatie\Dashboard\Enums\Theme` enum instead of a string. `Dashboard::getMode()` now returns a `Spatie\Dashboard\Enums\Mode` enum instead of a string.

```
// Before
$theme = $dashboard->getTheme(); // 'light'
$mode = $dashboard->getMode(); // 'light'

// After
$theme = $dashboard->getTheme(); // Theme::Light
$mode = $dashboard->getMode(); // Mode::Light

// To get the string value
$theme->value; // 'light'
$mode->value; // 'light'
```

If you published the dashboard views, update `dashboard.blade.php` to use `->value`:

```
{{-- Before --}}
x-data="theme('{{ $theme }}', '{{ $initialMode }}')"

{{-- After --}}
x-data="theme('{{ $theme->value }}', '{{ $initialMode->value }}')"
```

### Tailwind CSS 4

The dashboard now uses Tailwind CSS 4 with the `@tailwindcss/browser` CDN. If you published the dashboard views, update them to use the new Tailwind 4 `@theme` directive instead of a `tailwind.config.js` file.

### Tile model changes

The `Tile` model now uses `$fillable = ['name', 'data']` instead of `$guarded = []`. If you are mass-assigning additional attributes, extend the model and add those attributes to `$fillable`.

The `Tile` model now uses the `casts()` method instead of the `$casts` property. If you are extending the `Tile` model and overriding casts, update to the method syntax:

```
// Before
protected $casts = [
    'data' => 'array',
];

// After
protected function casts(): array
{
    return [
        'data' => 'array',
    ];
}
```

### `refreshIntervalInSeconds` renamed to `refreshInterval`

The `$refreshIntervalInSeconds` property on `DashboardTileComponent` has been renamed to `$refreshInterval`. This does not affect Blade usage since the attribute was already `refresh-interval`.

If you published the tile view, update `tile.blade.php`:

```
{{-- Before --}}
{{ $refreshIntervalInSeconds ? "wire:poll.{$refreshIntervalInSeconds}s" : '' }}

{{-- After --}}
{{ $refreshInterval ? "wire:poll.{$refreshInterval}s" : '' }}
```

### New `BaseTileComponent` class

A new `Spatie\Dashboard\Components\BaseTileComponent` abstract class is available. It extends Livewire's `Component`, includes a `$position` property, the `#[Defer]` attribute for lazy-loading, and a skeleton placeholder. You can use it as the base class for your tiles instead of `Livewire\Component`.

### New `lazy` and `defer` props on ``

The `` Blade component now accepts `lazy` and `defer` boolean props for controlling Livewire's lazy-loading behavior.

### Migration stub uses anonymous class

The migration stub now uses an anonymous class. If you have already published and run the migration, no action is needed.

From v2 to v3
-----------------------------------------------------------------------------------------------

This release supports Livewire v3. There are no other breaking changes

If you have any error, you can check livewire 3 upgrade guide https://livewire.laravel.com/docs/upgrading

You can also try the command which can help if you have have created some custom iiles (->emit() became ->dispatch() for example)

`php artisan livewire:upgrade`

Don't forget to specify your APP\_URL in .env, and to clear cache, config, etc... with `php artisan optimize:clear`

 A good
match?
-------------

### What we do best

- All things Laravel
- Custom frontend components
- Building APIs
- AI-powered features
- Simplifying things
- Clean solutions
- Integrating services

### Not our cup of tea

- WordPress themes
- Cutting corners
- Free mockups to win a job
- "Just execute the briefing"

 In short: we'd like to be a **substantial part** of your project.

 [ Get in touch via email ](mailto:info@spatie.be?subject=A%20good%20match%21&body=Tell%20us%20as%20much%20as%20you%20can%20about%0A-%20your%20online%20project%0A-%20your%20planning%0A-%20your%20budget%0A-%20%E2%80%A6%0A%0AAnything%20that%20helps%20us%20to%20start%20straightforward%21)