48 lines
1.2 KiB
PHTML
48 lines
1.2 KiB
PHTML
<?php
|
|
/**
|
|
* @var string $component
|
|
* @var ?string $id
|
|
* @var array $props
|
|
* @var App\View\GlobalSections $sections
|
|
* @var Doctrine\Common\Collections\ArrayCollection $globalProps
|
|
*/
|
|
|
|
$componentDeps = $this->getVueComponentInfo('vue/pages/' . $component . '.js');
|
|
|
|
$globalProps->set('componentProps', $props);
|
|
$propsJson = json_encode($globalProps->toArray(), JSON_THROW_ON_ERROR);
|
|
|
|
$headScripts = [];
|
|
|
|
foreach ($componentDeps['css'] as $cssDep) {
|
|
$headScripts[] = <<<HTML
|
|
<link rel="stylesheet" href="{$cssDep}" />
|
|
HTML;
|
|
}
|
|
|
|
foreach ($componentDeps['prefetch'] as $prefetchDep) {
|
|
$headScripts[] = <<<HTML
|
|
<link rel="modulepreload" href="{$prefetchDep}" />
|
|
HTML;
|
|
}
|
|
|
|
$sections->append('head', implode("\n", $headScripts));
|
|
|
|
$scriptLines = [];
|
|
$componentName = 'Vue_' . str_replace('/', '', $component);
|
|
|
|
$scriptLines[] = <<<HTML
|
|
<script type="module" src="{$componentDeps['js']}"></script>
|
|
<script type="text/javascript">
|
|
let {$componentName};
|
|
ready(() => {
|
|
{$componentName} = window.vueComponent('#{$id}', {$propsJson});
|
|
});
|
|
</script>
|
|
HTML;
|
|
|
|
$sections->append('bodyjs', implode("\n", $scriptLines));
|
|
?>
|
|
|
|
<div id="<?= $id ?>">Loading...</div>
|