Skill: Create Admin Backend Page

Admin pages use Twig templates with Vue 3 islands for interactive components.

Steps

1. Create Twig Template

In admin/templates/{module}/{action}.html.twig:

{% extends 'base.html.twig' %}

{% block title %}{Module} - {Action}{% endblock %}

{% block body %}
<div class="container">
    <h1>{{ '{Module} {Action}' }}</h1>

    {# Vue island for interactive parts #}
    <div id="{module}-{action}-app"
         data-props="{{ props|json_encode }}">
    </div>
</div>
{% endblock %}

2. Create Vue Island (if interactive)

In admin/assets/islands/{module}/{ActionComponent}.vue:

<script setup lang="ts">
// Component logic
</script>

<template>
  <!-- Interactive UI -->
</template>

3. Create Controller

Admin controllers in src/Module/{Module}/Presentation/Controller/Admin/:

#[Route('/admin/{module}')]
final class {Module}AdminController extends AbstractController
{
    #[Route('/', name: 'admin_{module}_list')]
    public function list(): Response
    {
        return $this->render('{module}/list.html.twig', [
            // ... data
        ]);
    }
}