Another way to use EXT:headless for a Vue app with "TYPO3 SSR"

In a previous post did I show a way to build a Vue app (Vue TYPO3 Template / Sitepackage) without the (for me pretty annoying) JS SSR stuff. Instead of that I use the TYPO3 generated content as "SSR content" which can any crawler/bot read. Today I will show another approach, which is a little bit different but with the same result.

We can use 2 TYPO3 installations and map tables between this installations. If we map all content related tables like tt_content, pages, news, sys_files and references and so on. We use one of them as the BE/API/headless instance, which spits out the JSON. And this JSON is used in the Vue code on the FE TYPO3 instance. The instances runs under different (sub)domains, eg. fronted.ddev.site and api.ddev.site.

The table mapping looks like this:

LocalConfiguration.php in your Frontend TYPO3

'DB' => [
    'Connections' => [
        // The frontend database connection
        'Default' => [
            'dbname' => 'my_frontend_db',
            'driver' => 'mysqli',
            'host' => 'my_frontend_host',
            'password' => 'my_frontend_pwd',
            'port' => '3306',
            'user' => 'my_frontend_db_user',
        ],
        // The backend database connection
        'Backend' => [
            'charset' => 'utf8mb4',
            'driver' => 'mysqli',
            'dbname' => 'my_backend_db',
            'host' => 'my_backend_host',
            'password' => 'my_backend_pwd',
            'port' => 3306,
            'user' => 'my_backend_db_user',
        ],
    ],
    // The content related tables
    'TableMapping' => [
        'pages' => 'Backend',
        'tt_content' => 'Backend',
        'sys_file' => 'Backend',
        'sys_file_reference' => 'Backend',
        'sys_file_metadata' => 'Backend',
        'tx_news_domain_model_link ' => 'Backend',
        'tx_news_domain_model_news' => 'Backend',
        'tx_news_domain_model_news_related_mm' => 'Backend',
        'tx_news_domain_model_news_tag_mm' => 'Backend',
        'tx_news_domain_model_news_ttcontent_mm' => 'Backend',
        'tx_news_domain_model_tag' => 'Backend',
    ]
],

With this we can add pages or content on both TYPO3 installations. Keep in mind that if you edit or add content in your FE TYPO3, the cache from BE/API TYPO3 somethimes needs to be cleared. Don't be surprised if nothing happens in your Vur App / Website Template if you clear the FE T3 caches.

A symlink is also required. The whole /fileadmin folder from FE must link to the BE directory to make sys_files work. The other stuff needed for a TYPO3 Vue Template/Sitepackage ,like a ViewHelper which inserts your /dist JS and CSS into the FE HTML code, was explained in my previous post. Any questions or hints? Please use my contact form. Comment function coming soon ...