#concrete5 An example of the custom template that rendered by Vue.js

view.php

<?php
// application/blocks/topic_list/templates/your_template_name.php

use Concrete\Core\Tree\Node\Node;
use Concrete\Core\Tree\Node\Type\Category;
use Concrete\Core\Tree\Type\Topic;

defined('C5_EXECUTE') or die("Access Denied.");

$json = [];
if (!isset($selectedTopicID)) {
    $selectedTopicID = null;
}

/** @var Topic $tree */
if ($mode == 'S' && is_object($tree)) {
    /** @var Node $node */
    $node = $tree->getRootTreeNodeObject();
    $node->populateChildren();
    if (is_object($node)) {
        $topics = $node->getChildNodes();
    }
}

if (isset($topics) && is_array($topics) && count($topics) > 0) {
    foreach ($topics as $topic) {
        if (!$topic instanceof Category) {
            $data = new stdClass();
            $data->name = $topic->getTreeNodeDisplayName();
            $data->link = (string) $view->controller->getTopicLink($topic);
            if ($selectedTopicID == $topic->getTreeNodeID()) {
                $data->selected = true;
            } else {
                $data->selected = false;
            }
            $json[] = $data;
        }
    }
}
?>
<div class="ccm-block-topic-list-wrapper">
    <div class="ccm-block-topic-list-header">
        <h5><?php echo h($title); ?></h5>
    </div>
    <div id="<?= $controller->getIdentifier(); ?>">
        <ul>
            <li v-for="node in nodes">
                <a :href="node.link">{{ node.name }}</a>
            </li>
        </ul>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: '#<?= $controller->getIdentifier(); ?>',
        data: {
            nodes: <?= json_encode($json); ?>
        }
    })
</script>