Quickstart | Wire Drupal

Install Wire Drupal

Install the modules

composer require wire-drupal/wire

Enable the module

drush en wire

Create a component

A new component can be generated with a Drush command

drush generate wire

Assuming all needed prompts have been answered and the ID has been set as `counter`, the following two files are going to be generated:

../wiredemo/src/Plugin/WireComponent/Counter.php

namespace Drupal\wiredemo\Plugin\WireComponent;

use Drupal\wire\Plugin\Attribute\WireComponent;
use Drupal\wire\WireComponentBase;
use Drupal\wire\View;

#[WireComponent(id: 'counter')]
class Counter extends WireComponentBase {

  public function render(): ?View {
    return View::fromTpl('counter');
  }
  
}

../wiredemo/templates/wire/counter.html.twig

<div>
    ...
</div>

A boiler plate twig file has been created so let's add some content

<div>
    <h1>Hello World!</h1>
</div>

Worth noting that each Wire component must have a single root element.

Include the component

A Wire component can be included anywhere throughout your app with `wire()` Twig function

<body>

  ...
  
  {{ wire('counter') }}
  
  ...
  
</body>

It can also be included in any render-able array via `wire` render element. E.g:

namespace Drupal\wiredemo\Controller;

use Drupal\Core\Controller\ControllerBase;

class CounterController extends ControllerBase {

  public function content(): array {
    return [
      '#type' => 'wire',
      '#id' => 'counter',
    ];
  }

}

Visit the page where Wire Component has been included in the browser and you should see "Hello World!".

Note: Ensure that the module in which the component has been generated is enabled

Add "counter" functionality

Replace generated content of the `counter` component class and template with the following

../wiredemo/src/Plugin/WireComponent/Counter.php

namespace Drupal\wire\Plugin\WireComponent;

use Drupal\wire\Plugin\Attribute\WireComponent;
use Drupal\wire\WireComponentBase;
use Drupal\wire\View;

#[WireComponent(id: 'counter')]
class Counter extends WireComponentBase {

  public int $count = 0;
  
  public function increment() {
    $this->count++;
  }
  
  public function render(): ?View {
    return View::fromTpl('counter');
  }
  
}

../wiredemo/templates/wire/counter.html.twig

<div style="text-align: center">

  <button wire:click="increment">+</button>
  
  <h1>{{ count }}</h1>
  
</div>

View it in the browser

Now reload the page in the browser, you should see the counter component rendered.

If you click the "+" button, the page should automatically update without a page reload.

This is the most basic example to give you an idea of what is going on here. Check other Docs pages to see what Wire can do and what problems it can solve.

Credits

WireDrupal is inspired by Livewire and uses Alpine.js to deliver DOM diffing and client-side functionality.

It integrates these tools into the Drupal ecosystems, building on the foundational work of Caleb Porzio.