Islands
Create isolated Vue applications for independent, encapsulated components.
Basic Usage
Mark a component with #[Island] to mount it as a separate Vue application:
use LiVue\Attributes\Island;
#[Island]
class AnalyticsWidget extends Component
{
public array $data = [];
public function refresh()
{
$this->data = Analytics::getData();
}
}How Islands Work
Regular Components
Share the parent's Vue instance. State and reactivity are connected.
Islands
Create their own Vue app. Completely independent state and reactivity.
- 1. Each island creates its own Vue application instance
- 2. Island state is completely isolated from parent
- 3. AJAX updates to an island don't affect the parent
- 4. Vue reactivity doesn't cross island boundaries
When to Use Islands
Heavy Components
Widgets with complex local state that shouldn't affect parent performance.
Third-Party Integrations
Components using libraries that might conflict with parent reactivity.
Performance Isolation
Prevent large re-renders from affecting other parts of the page.
State Isolation
When you need completely independent state management.
Example
<div>
<h1>Dashboard</h1>
<p>Counter: {{ $counter }}</p>
<!-- Island widget has its own Vue app -->
@livue('analytics-widget')
</div>#[Island]
class AnalyticsWidget extends Component
{
public int $localCounter = 0;
public function increment()
{
$this->localCounter++;
}
}Combining with Lazy Loading
Islands work great with lazy loading for deferred, isolated components:
#[Island]
#[Lazy]
class HeavyWidget extends Component
{
// Loads on viewport intersection AND has isolated Vue app
}Verifying Islands
Open Vue DevTools to see separate Vue application instances. Each island appears as a distinct root in the component tree.