Building Widgets

Generating a widget#

You can generate a widget with a console command:

php please make:widget LocalWeather

This will automagically create a class in app/Widgets and a Vue component in resources/js/components/widgets.

The PHP class is responsible for returning the Vue component and any props:

// app/Widgets/LocalWeather.php

<?php  
  
namespace App\Widgets;  
  
use Statamic\Widgets\VueComponent;
use Statamic\Widgets\Widget;
  
class LocalWeather extends Widget  
{
    public function component()  
    {  
        return VueComponent::render('LocalWeather', ['message' => 'Hello World!']);
    }  
}

<script setup>
import { Widget } from '@statamic/cms/ui';

efineProps(['message']);
</script>

<template>
    <Widget title="LocalWeather">
        <div class="px-4 py-3">
            <p>👋 {{ message }}</p>
        </div>
    </Widget>
</template>

The <Widget> component requires a title prop, along with optional icon and href props. You also pass an actions slot to render content in the top right of the widget.

If you'd prefer to create your widget using Blade, simply pass the --blade argument to the make:widget command.

Configuring#

Widgets can be added to the dashboard by modifying the widgets array in the config/statamic/cp.php file.

// config/statamic/cp.php
'widgets' => [
  [ 
      'type' => 'local_weather',
      'width' => 100,
  ], 
],