#concrete5 An example of the custom template for page list with Vue.js

view.php

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

$c = Page::getCurrentPage();

/** @var \Concrete\Core\Utility\Service\Text $th */
$th = Core::make('helper/text');
/** @var \Concrete\Core\Localization\Service\Date $dh */
$dh = Core::make('helper/date');

if ($c->isEditMode() && $controller->isBlockEmpty()) {
    ?>
    <div class="ccm-edit-mode-disabled-item"><?php echo t('Empty Page List Block.') ?></div>
    <?php
} else {
    $data = new stdClass();
    $data->pageListTitle = (isset($pageListTitle)) ? $pageListTitle : '';

    $config = new stdClass();
    $config->includeName = (isset($includeName) && $includeName) ? true : false;
    $config->includeDate = (isset($includeDate) && $includeDate) ? true : false;
    $config->includeDescription = (isset($includeDescription) && $includeDescription) ? true : false;
    $config->useButtonForLink = (isset($useButtonForLink) && $useButtonForLink) ? true : false;
    $config->displayThumbnail = (isset($displayThumbnail) && $displayThumbnail) ? true : false;
    $config->buttonLinkText = (isset($buttonLinkText)) ? $buttonLinkText : '';
    $config->noResultsMessage = (isset($noResultsMessage)) ? $noResultsMessage : '';
    $data->config = $config;

    $_pages = [];
    foreach ($pages as $page) {
        $_page = new stdClass();
        $_page->title = $page->getCollectionName();
        if ($page->getCollectionPointerExternalLink() != '') {
            $_page->url = $page->getCollectionPointerExternalLink();
            if ($page->openCollectionPointerExternalLinkInNewWindow()) {
                $_page->target = '_blank';
            }
        } else {
            $_page->url = $page->getCollectionLink();
            $_page->target = $page->getAttribute('nav_target');
        }
        $_page->target = empty($_page->target) ? '_self' : $_page->target;
        $_page->description = $page->getCollectionDescription();
        $_page->description = $controller->truncateSummaries ? $th->wordSafeShortText($_page->description, $controller->truncateChars) : $_page->description;
        $_page->thumbnail_original = false;
        $_page->thumbnail_thumbnail = false;
        if (isset($displayThumbnail) && $displayThumbnail) {
            /** @var \Concrete\Core\Entity\File\File|\Concrete\Core\Entity\File\Version $thumbnail */
            $thumbnail = $page->getAttribute('thumbnail');
            if (is_object($thumbnail)) {
                $_page->thumbnail_original = $thumbnail->getRelativePath();
                $_page->thumbnail_thumbnail = $thumbnail->getThumbnailURL('rnn_thumbnail');
            }
        }
        $_page->date = $dh->formatDateTime($page->getCollectionDatePublic(), true);
        $_pages[] = $_page;
    }
    $data->pages = $_pages;
    ?>
    <div id="<?= $controller->getIdentifier(); ?>">
        <div class="ccm-block-page-list-wrapper">
            <div v-if="pageListTitle != ''" class="ccm-block-page-list-header">
                <h5>{{ pageListTitle }}</h5>
            </div>
            <div class="ccm-block-page-list-pages">
                <concrete-page-entry v-for="page in pages" :page="page" :config="config"/>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
        const ConcretePageEntry = {
            props: ['page', 'config'],
            template: `
                <div>
                    <div v-if="config.displayThumbnail" class="ccm-block-page-list-page-entry-thumbnail">
                        <img :src="page.thumbnail_original" :alt="page.title"/>
                    </div>
                    <div class="ccm-block-page-list-page-entry-text">
                        <div v-if="config.useButtonForLink" class="ccm-block-page-list-title">
                            {{ page.title }}
                        </div>
                        <div v-else class="ccm-block-page-list-title">
                            <a :href="page.url" :target="page.target">{{ page.title }}</a>
                        </div>
                        <div v-if="config.includeDate" class="ccm-block-page-list-date">
                            {{ page.date }}
                        </div>
                        <div v-if="config.includeDescription" class="ccm-block-page-list-description">
                            {{ page.description }}
                        </div>
                        <div v-if="config.useButtonForLink" class="ccm-block-page-list-page-entry-read-more">
                            <a :href="page.url" :target="page.target">{{ config.buttonLinkText }}</a>
                        </div>
                    </div>
                </div>
            `
        }

        new Vue({
            el: '#<?= $controller->getIdentifier(); ?>',
            data: <?= json_encode($data); ?>,
            components: {
                'concrete-page-entry': ConcretePageEntry
            }
        })
    </script>
    <?php
}