render-inline-JavaScript-with-secureRenderer

gistfile1.txt

<?php
/**
 * @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer
 */
?>
<div id="vue-test">
    <h1>{{ message }}</h1>
</div>
<?php $scriptString = <<<script
/**
 * Define the `require` statement inline of your PHTML template. RequireJS will automatically pull in
 * the required dependencies, and fire off your callback after they have resolved.
 */
require(['vue'], function(Vue) {
    'use strict'

    new Vue({
        el: '#vue-test',
        data: {
            message: 'This is a test'
        }
    });
});

script;
?>
<?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false) ?>