Create vue component

Skill jeffsenso/prestashop-skills/skills/prestashop-module-development/ps9-core-ai/Component/Javascript/skills/create-vue-component

Prestashop Developer Skills

Install

npx -y skills add jeffsenso/prestashop-skills --skill create-vue-component

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Integrate a Vue 3 component into a Symfony admin page for complex UX sections. This is an exception pattern — most pages use initComponents with standard components. Vue is only needed when a section requires rich interactivity that standard form types cannot provide (e.g. combination listing, dynamic range tables). Trigger: "add Vue component for {Domain}".

SKILL.md

4.0 KB, as published. Nobody here has run it

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);
});

4. Symfony/Twig side

The Twig template provides the mount point with initial data as data-* attributes:

<div id="vue-mount-point"
     data-translations="{{ translations|json_encode }}"
     data-initial="{{ initialData|json_encode }}">
</div>

A dedicated FormType can bridge PHP form data to the Vue component via hidden fields and data-* attributes.

Reference: admin-dev/themes/new-theme/js/pages/product/combination/ — combination listing with filters, generator modal, bulk actions

Communication with the rest of the page

Use EventEmitter for events between Vue and non-Vue sections
Vue component receives eventEmitter as a prop
Emits events that the TypeScript entry point or other components listen to
Hidden form fields sync Vue state back to the Symfony form for submission

Rules

Conventions (Composition API required, vue-i18n setup, hidden form field sync, EventEmitter as prop) are in Javascript/CONTEXT.md. Skill-specific reminders:

Vue is the exception, not the default — justify its use
Mount on a specific DOM selector, not the entire page