create-vue-component

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

// 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: SomeType,
): void {
  const container = document.querySelector(selector);
  if (!container) return;

  const translations = JSON.parse(container.dataset.translations || '{}');
  const i18n = createI18n({locale: 'en', messages: {en: translations}});

  const app = createApp(ComponentName, {
    eventEmitter,
    initialData,
  });
  app.use(i18n);
  app.mount(selector);
}

3. Call from the page entry point

// In form/index.ts or edit/index.ts
import initComponentName from './components/initComponentName';

$(() => {
  // Standard components first
  window.prestashop.component.initComponents(['TranslatableInput']);

  // Vue section
  const eventEmitter = window.prestashop.instance.eventEmitter;
  initComponentName('#vue-mount-point', eventEmitter, initialData);
});