Гидратация VueJs PHP

126

16 ноября 2020, 08:10

Всем привет, народ помогите разобраться с Vue, для СЕО необходимо генерить код html на сервере, на клиенте минимальный функционал с vuejs: фильтровать, скрывать/показывать и тд.

<?php /** @var array $direction_list */
        foreach ($direction_list as $direction) : ?>
            <div class="country">
                <img src="<?= $direction['CountryImageUrl'] ?>" alt="">
                <a class="name" href="<?= $direction['url'] ?>"><?= $direction['CountryName'] ?></a>
                <a class="price" href="<?= $direction['url'] ?>">от <?= $direction['MinPrice'] ?> руб.</a>
                <div class="link"><a href="<?= $direction['url'] ?>">Подробнее</a></div>
            </div>
<?php endforeach; ?>

Как с помошью Вью спарсить html и дальше работать с ним? В голову приходит только при загрузки страницы брать данные по апи и заменять весь блок со странами а потом уже работать с ним. Доки прочитал и гугл шерстил ничего адекватного. Получается только замена поможет, помогите кто хорошо разбирается во вью)

Answer 1

Во вью кроме как серверного рендеринга нет других способов передать данные(взять данные из разметки) во Vuejs.

Если для SEO необходима разметка с данными, делайте это как обычно на сервере на php(например, в моем случае), далее описывайте компоненты для Vuejs и в разметке указывайте места вставки этих компонентов. Тогда поисковые роботы будут видеть структуру которая будет сгенирирована на сервере, а у посетителей при загрузке страницы Vuejs сравнит данные и заменит блоки на компоненты.

Если нужны подробные объяснения, напишите, постараюсь помочь