How to link Nuxt and CMS?

Question

PHP

The cms is craft . It is by default built on twig templates, from which html is subsequently generated. In my case, the element-api plugin is used , which allows craft to be used as headless-cms. The number of twig templates in this case is reduced to one, the index one, which, in addition to the head section, contains a div#app where the application is supposed to be mounted.
At the root of craft cms there is a web folder, which contains index.php with the following content

<?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();

In general, this is the main, root file that is served when the application starts. Like index.php in wordpress.

If I did it in normal Vue, then no problem: I'm not too strong in php (and in general, in server matters), and I don't really understand what exactly happens in index.php, and how informative this code snippet is, but when launching a craft application (on localhost, for example) - Vue normally mounts to div#app from index.twig and everything works.

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

But Nuxt works in a different way (I've only recently started to learn it), there doesn't seem to be an explicit mount method (or something similar) like in the Vue example above, and I just can't figure out how to get me to run nuxt application in craft context. So, for example, craft runs locally on localhost, and nuxt dev runs the Nuxt application on localhost:3000, and in essence, these are like two different sites that are not connected in any way. It doesn’t matter to me whether all this will run with or without a port, it’s important to understand how to make them friends. I tried a lot of things, half at random, but the third day I can not solve the problem. I would be grateful if not for a ready-made solution, then at least for hints in which direction to look.

Answer 1

The advice is simple - learn.
Everything is very chaotic, nothing is clear. How it works, how it's configured...
You can turn on the fortune teller mode. Someone will do this and will give advice. Maybe they will point you in the right direction ...
Let's start first.
What is "headless-cms"? it is essentially a cms in API mode. Receives a request, returns raw data. Most often in json format.
What follows from this?
This means you have two applications. Server part on cms. And the client side on vue.
The first works on php, the second on nodejs.
So you must raise two servers (software) on your server (machine). One will process requests for data (API/cms), the other will hang on the default port 80 (your front on VUE) and take data from the first one.
As for nuxt, it can work in SSR modes and without it. If not, then it all comes down to copying your index.html from the build into the main CMS template. If with SSR, then you have to raise additional. nodejs server and resolve requests with nginx. 80th port on nodejs, custom - on php cms.