Quickstart

Install the modules

composer require wire-drupal/wire

Enable the module

drush en wire

 

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.

 

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

 

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>

 

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.

********************************** ************************* ************************ **************** ****************** *********** ************** ************* ************ *************