Support Wire Drupal

Fund development, features & content

Sponsor

Making Components

Learn how to create Wire components

Introduction

Run the following Drush command to create a new Wire component

We'll assume you entered the Wire Label as "Articles" in a module with "wiredemo" machine name

drush generate wire

Note: Drush ^12 is required for the generate command to work

Two new files were created in your chosen module:

../wiredemo/src/Plugin/WireComponent/Articles.php  
../wiredemo/templates/wire/articles.html.twig

Inline Components

If you wish to create an Inline component (without .twig files), you can answer the "Inline" prompt as "Yes" and only the PHP class will be created:

../wiredemo/src/Plugin/WireComponent/Articles.php

Here's what it would look like:

namespace Drupal\wiredemo\Plugin\WireComponent;

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

#[WireComponent(id: 'articles')]
class Articles extends WireComponentBase {

  public function render(): ?View {
    $twig = <<<'TWIG'
      <div></div>
    TWIG;
    
    return View::fromString($twig);
  }

}