create-vue-componentlisted

# create-vue-component Read `@.ai/Component/Javascript/CONTEXT.md` for the Vue integration overview. > **This is NOT the default pattern.** Most admin pages use `initComponents()` with > standard PS components. Only use Vue when a page section requires complex interactivity > that standard form types and JS components cannot provide. ## When to use Vue - Dynamic row tables (add/remove rows, reorder) — e.g. carrier ranges - Complex filtering/search UIs with real-time updates — e.g. combination filters - Sections with heavy state synchronization between multiple fields - Interactive modals with multi-step workflows When NOT to use Vue: simple forms, standard CRUD, toggle switches, translatable fields — all handled by `initComponents`. ## Integration pattern Vue components are mounted on **one section of a Symfony page**, not the entire page. The rest of the page remains standard Symfony/Twig + PS components. ### 1. Create the Vue SFC ``` admin-dev/themes/new-theme/js/pages/{domain}/components/{ComponentName}.vue ``` Standard Vue 3 SFC with `<script setup>`, `<template>`, `<style>`. Use Composition API. ### 2. Create the initialization function ```typescript // admin-dev/themes/new-theme/js/pages/{domain}/components/init{ComponentName}.ts import {createApp} from 'vue'; import {createI18n} from 'vue-i18n'; import ComponentName from './ComponentName.vue'; export default function initComponentName( selector: string, eventEmitter: typeof EventEmitter, initialData: