Contents

System\Traits\VueMaker

Overview

VueMaker Trait adds Vue based methods to a class

To add a component call the registerVueComponent method:

$this->registerVueComponent('Plugin/VueComponents/MyComponent');

This will automatically load the component's JavaScript definition, component template, and CSS file.

See Also

Protected Properties

protected array $vueComponents

vueComponents contains Vue component classes

protected array $vueComponentClasses

vueComponentClasses tracks registered class names for O(1) lookup

Public Methods

public outputVueComponentTemplates()

public outputVueComponentTemplates(): void

outputVueComponentTemplates outputs templates and ESM component registration. This method:

  1. Renders text/template scripts for each component
  2. Imports ESM modules and registers them as Vue components with template injection

public outputVueComponentsForAjax()

public outputVueComponentsForAjax($response): void

outputVueComponentsForAjax sends Vue component ESM files and registration code through the AJAX response asset pipeline, so they are loaded and registered before DOM patching occurs.

public registerVueComponent()

public registerVueComponent(string $className): void

registerVueComponent to be loaded when the action view renders.

Protected Methods

protected getEsmModuleUrl()

protected getEsmModuleUrl($path): string

getEsmModuleUrl converts a file path to a public URL

protected getVueComponentRegistrations()

protected getVueComponentRegistrations(): array

getVueComponentRegistrations builds a flat list of component registrations including subcomponents, with ESM URLs, names, templates, and import aliases.

protected isVueComponentRegistered()

protected isVueComponentRegistered($className): void

protected makeVueComponent()

protected makeVueComponent($className): void