PHPackages                             eznix86/blade-islands - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. eznix86/blade-islands

ActiveLibrary[Templating & Views](/categories/templating)

eznix86/blade-islands
=====================

Blade islands for Laravel.

0.1.0(1mo ago)121↓100%[1 issues](https://github.com/eznix86/laravel-blade-islands/issues)MITPHPPHP ^8.3CI passing

Since Mar 22Pushed 1mo agoCompare

[ Source](https://github.com/eznix86/laravel-blade-islands)[ Packagist](https://packagist.org/packages/eznix86/blade-islands)[ Docs](https://github.com/eznix86/laravel-blade-islands)[ RSS](/packages/eznix86-blade-islands/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (10)Versions (4)Used By (0)

🏝️ Blade Islands For Laravel
============================

[](#️-blade-islands-for-laravel)

 [![Blade Islands for Laravel](art/header.png)](art/header.png)

[![Latest Stable Version](https://camo.githubusercontent.com/adc1892144060d7f9448be312f7a0b56d7bc79d55fc8d5241326602b058189e6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f657a6e697838362f626c6164652d69736c616e6473)](https://packagist.org/packages/eznix86/blade-islands)[![Total Downloads](https://camo.githubusercontent.com/ec4ef8aa2a4003667146fc8f03515774afcdfc084560157d3dad03106fb4a30f/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f657a6e697838362f626c6164652d69736c616e6473)](https://packagist.org/packages/eznix86/blade-islands)[![License](https://camo.githubusercontent.com/d502f16b0e58641230d6f8e93a1c3e6c67ef07c879451bb4368fba4caf87ade1/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f657a6e697838362f626c6164652d69736c616e6473)](LICENSE)

Server-side Blade directives for React, Vue, and Svelte islands in Laravel.

Blade Islands lets you render small React, Vue, or Svelte components inside Laravel Blade views without turning your application into a full single-page app.

This package provides the Blade directives and HTML output. The browser runtime lives in the npm package [`blade-islands`](https://github.com/eznix86/blade-islands).

Contents
--------

[](#contents)

- [Why Blade Islands?](#why-blade-islands)
- [Installation](#installation)
- [Quick Start](#quick-start)
- [Available Directives](#available-directives)
- [How It Works](#how-it-works)
- [Vite Setup](#vite-setup)
- [Component Resolution](#component-resolution)
- [Custom Root](#custom-root)
- [Preserve Mounted Islands](#preserve-mounted-islands)
- [Options](#options)
- [Protocol](#protocol)
- [Requirements](#requirements)
- [Companion Package](#companion-package)
- [Blade Islands vs X](#blade-islands-vs-x)
- [Testing](#testing)
- [Contributing](#contributing)
- [License](#license)

Why Blade Islands?
------------------

[](#why-blade-islands)

Blade Islands works well when your application is mostly server-rendered but still needs interactive UI in places such as:

- search inputs
- dashboards
- maps
- counters
- filters
- dialogs

Instead of building entire pages in a frontend framework, you can keep Blade as your primary rendering layer and hydrate only the parts of the page that need JavaScript.

Installation
------------

[](#installation)

Install the Laravel package:

```
composer require eznix86/blade-islands
```

Then install the browser runtime, your frontend framework, and the matching Vite plugin.

### React

[](#react)

```
npm install blade-islands react react-dom @vitejs/plugin-react
```

### Vue

[](#vue)

```
npm install blade-islands vue @vitejs/plugin-vue
```

### Svelte

[](#svelte)

```
npm install blade-islands svelte @sveltejs/vite-plugin-svelte
```

Quick Start
-----------

[](#quick-start)

Add the runtime to `resources/js/app.js`, load that entry from your Blade layout, and render an island from Blade.

### React

[](#react-1)

`resources/js/app.js`

```
import islands from 'blade-islands/react'

islands()
```

Blade layout:

```

    @viteReactRefresh
    @vite(['resources/css/app.css', 'resources/js/app.js'])

```

```
@react('ProfileCard', ['user' => $user])
```

This mounts `resources/js/islands/ProfileCard.jsx`.

### Vue

[](#vue-1)

`resources/js/app.js`

```
import islands from 'blade-islands/vue'

islands()
```

Blade layout:

```

    @vite(['resources/css/app.css', 'resources/js/app.js'])

```

```
@vue('ProfileCard', ['user' => $user])
```

This mounts `resources/js/islands/ProfileCard.vue`.

### Svelte

[](#svelte-1)

`resources/js/app.js`

```
import islands from 'blade-islands/svelte'

islands()
```

Blade layout:

```

    @vite(['resources/css/app.css', 'resources/js/app.js'])

```

```
@svelte('ProfileCard', ['user' => $user])
```

This mounts `resources/js/islands/ProfileCard.svelte`.

Available Directives
--------------------

[](#available-directives)

Blade Islands provides three directives:

```
@react('Dashboard', ['user' => $user])
@vue('Support/TicketList', ['tickets' => $tickets])
@svelte('Cart/Drawer', ['count' => $count])
```

How It Works
------------

[](#how-it-works)

Blade Islands has two parts:

- this package renders island placeholders from Blade
- the npm runtime scans the DOM and mounts the matching frontend component

For example:

```
@react('Account/UsageChart', ['stats' => $stats])
```

renders the metadata needed to mount:

```
resources/js/islands/Account/UsageChart.jsx

```

Vite Setup
----------

[](#vite-setup)

Register the plugin for the framework you use.

### React

[](#react-2)

```
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})
```

If your Laravel layout loads a React entrypoint in development, include:

```
@viteReactRefresh
```

### Vue

[](#vue-2)

```
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
})
```

### Svelte

[](#svelte-2)

```
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()],
})
```

Component Resolution
--------------------

[](#component-resolution)

By default, the runtime looks for components in `resources/js/islands`.

Nested folders work automatically. For example:

```
@vue('Billing/Invoices/Table', [...])
```

resolves to:

```
resources/js/islands/Billing/Invoices/Table.vue

```

Custom Root
-----------

[](#custom-root)

This package does not resolve filesystem paths itself, but it works with custom roots configured in the browser runtime.

For example, if your frontend entry uses:

```
import islands from 'blade-islands/vue'

islands({
  root: '/resources/js/widgets',
  components: import.meta.glob('/resources/js/widgets/**/*.vue'),
})
```

Then this Blade call:

```
@vue('Dashboard', [...])
```

mounts:

```
resources/js/widgets/Dashboard.vue

```

Preserve Mounted Islands
------------------------

[](#preserve-mounted-islands)

Use `preserve: true` when the same DOM is processed more than once and you want Blade Islands to keep an existing island mounted instead of mounting it again.

This is useful when the page or a DOM fragment is recalculated and your frontend boot logic runs again.

```
@react('Dashboard/RevenueChart', ['stats' => $stats], preserve: true)
@vue('Dashboard/RevenueChart', ['stats' => $stats], preserve: true)
@svelte('Dashboard/RevenueChart', ['stats' => $stats], preserve: true)
```

If you reuse a preserved component in a loop, pass a unique `key` so each island keeps its own identity:

```
@foreach ($products as $product)
    @react('Product/Card', ['product' => $product], preserve: true, key: "product-{$product->id}")
@endforeach
```

Options
-------

[](#options)

Each directive accepts up to four arguments:

```
@react($component, $props = [], $preserve = false, $key = null)
```

- `$component` - component name relative to the JavaScript component root
- `$props` - props encoded into the rendered HTML
- `$preserve` - keeps an existing island mounted when the same DOM is processed again
- `$key` - unique key for distinguishing repeated preserved islands

Named arguments are supported:

```
@react(
    component: 'Dashboard',
    props: ['user' => $user],
    preserve: true,
    key: 'dashboard-main',
)
```

Protocol
--------

[](#protocol)

Blade Islands renders lightweight placeholders like:

```

```

Requirements
------------

[](#requirements)

- PHP 8.3+
- Laravel 13+

Companion Package
-----------------

[](#companion-package)

Use this package with the separate browser runtime:

- npm package: `blade-islands`
- repository: `blade-islands`

Blade Islands vs X
------------------

[](#blade-islands-vs-x)

### Inertia.js

[](#inertiajs)

Inertia is a better fit when your application wants React, Vue, or Svelte to render full pages with a JavaScript-first page architecture.

Blade Islands is a better fit when your application is already Blade-first and you want to keep server-rendered pages while hydrating only selected components.

### MingleJS

[](#minglejs)

MingleJS is often used in Laravel applications that embed React or Vue components, especially in Livewire-heavy codebases.

Blade Islands is more naturally suited to Blade-first applications that want progressive enhancement with minimal architectural change. It does not depend on Livewire, and it may also be used alongside Livewire when that fits your application.

### Laravel UI

[](#laravel-ui)

Laravel UI is a legacy scaffolding package for frontend presets and authentication views.

Blade Islands solves a different problem: adding targeted client-side interactivity to server-rendered Blade pages.

Testing
-------

[](#testing)

```
composer install
composer test
```

Contributing
------------

[](#contributing)

Contributions are welcome.

1. Fork the repository
2. Create a focused branch
3. Add or update tests
4. Run `composer test`
5. Open a pull request with a clear summary

License
-------

[](#license)

MIT

###  Health Score

38

—

LowBetter than 85% of packages

Maintenance88

Actively maintained with recent releases

Popularity9

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 75% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

51d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/f52290ecebdd960ddfacf23d664e78b03c13f81fba7fbba661161b050f6a4150?d=identicon)[eznix86](/maintainers/eznix86)

---

Top Contributors

[![eznix86](https://avatars.githubusercontent.com/u/26553194?v=4)](https://github.com/eznix86 "eznix86 (6 commits)")[![renovate[bot]](https://avatars.githubusercontent.com/in/2740?v=4)](https://github.com/renovate[bot] "renovate[bot] (2 commits)")

---

Tags

bladeislandslaravelreactsveltevuelaravelbladereactvuesvelteislands

###  Code Quality

TestsPest

Static AnalysisPHPStan, Rector

Code StyleLaravel Pint

Type Coverage Yes

### Embed Badge

![Health badge](/badges/eznix86-blade-islands/health.svg)

```
[![Health](https://phpackages.com/badges/eznix86-blade-islands/health.svg)](https://phpackages.com/packages/eznix86-blade-islands)
```

###  Alternatives

[robsontenorio/mary

Gorgeous UI components for Livewire powered by daisyUI and Tailwind

1.5k454.7k15](/packages/robsontenorio-mary)[stijnvanouplines/blade-country-flags

A package to easily make use of country flags in your Laravel Blade views.

26307.2k6](/packages/stijnvanouplines-blade-country-flags)[saade/blade-iconsax

A package to easily make use of Iconsax in your Laravel Blade views.

21138.5k](/packages/saade-blade-iconsax)[allantatter/laravel-react

Render React.js components seemlessly on the server side within Laravel Blade views.

511.5k](/packages/allantatter-laravel-react)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)