Как связать Nuxt и CMS?

В качестве cms используется craft. Он по умолчанию построен на twig-шаблонах, из которых генерируется впоследствии html. В моем случае используется плагин element-api, позволяющий юзать craft в качестве headless-cms. Количество twig-шаблонов в этом случае сокращается до одного, индексного, в котором, помимо секции head, находится div#app, в который предполагается монтировать приложение.
В корне craft cms есть папка web, в которой лежит index.php следующего содержания

<?php

// Set path constants
define('CRAFT_BASE_PATH', dirname(__DIR__));
define('CRAFT_VENDOR_PATH', CRAFT_BASE_PATH.'/vendor');

// Load Composer's autoloader
require_once CRAFT_VENDOR_PATH.'/autoload.php';

// Load dotenv?
if (class_exists('Dotenv\Dotenv') && file_exists(CRAFT_BASE_PATH.'/.env')) {
    Dotenv\Dotenv::create(CRAFT_BASE_PATH)->load();
}

// Load and run Craft
define('CRAFT_ENVIRONMENT', getenv('ENVIRONMENT') ?: 'production');
/** @var craft\web\Application $app */
$app = require CRAFT_VENDOR_PATH.'/craftcms/cms/bootstrap/web.php';
$app->run();

В целом, это главный, корневой файл, который сервится при запуске приложения. Типа как index.php в wordpress.

Если бы я делал на обычном Vue, то никаких проблем:

new Vue({ render: h => h(App) }).$mount('#app')

Я не слишком силен в php (и в целом, в серверных вопросах), и не очень понимаю, что именно происходит в index.php, и насколько это вообще информативный фрагмент кода, но при запуске craft-приложения (на localhost, например) - Vue нормально маунтит в div#app из index.twig и все работает.
Но Nuxt работает как-то иначе (я его только недавно стал осваивать), там нет, кажется, явного метода mount (или чего-то аналогичного), как в примере со Vue выше, и я никак не могу понять, как мне заставить запускать nuxt-приложение в контексте craft. Так, например, craft локально запускается на localhost, а nuxt dev запускает приложение Nuxt на localhost:3000, и в сущности, это как бы два разных сайта получаются, никак не связанные. Мне непринципиально, будет ли всё это с портом запускаться, или без, важно понять, как их подружить. Много чего перепробовал, полунаугад, но третий день не могу решить проблему. Буду благодарен если не за готовое решение, то хотя бы за подсказки, в какую сторону смотреть.
  • Вопрос задан
  • 135 просмотров
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro
frontend developer
Совет простой — учитесь.
Всё очень сумбурно, ничего непонятно. Как устроено, как настроено...
Можно включить режим гадалки. Кто-то так и сделает и будет давать советы. Может они вас наведут в нужное русло...

Давайте сначала.
Что такое "headless-cms"? по сути это cms в режиме API. Получает запрос, отдает голые данные. Чаще всего в формате json.

Что из этого следует?
Это значит у вас два приложения. Серверная часть на cms. И клиентская на vue.
Первая работает на php, вторая на nodejs.

Значит вы на своем сервере (машине) должны поднять два сервера (программных). Один будет обрабатывать запросы к данным (API/cms), другой висеть на 80 дефолтном порту (ваш фронт на VUE) и брать данные из первого.

Что касается nuxt, то он может работать в режимах SSR и без него. Если без, то все сводится к тому, чтобы скопировать ваш index.html из билда в основной шаблон CMS. Если с SSR, то придется поднимать доп. nodejs сервер и разруливать запросы nginx'oм. 80-й порт на nodejs, кастомный - на php cms.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы