My way to make Vue and TYPO3 a good team

The TYPO3 PWA Initiative has build the EXT:headless. There is also a Nuxt Typo3 available which, as the name suggests, uses Nuxt. But the whole SSR stuff really gets on my nerves, maybe cause I'm too stupid for it ;-) And TBH, I only have limited knowledge of Vue. But TYPO3 is definitely my thing!

My approach works without conventional SSR, but can still be indexed to 100% by bots/crawlers. No joke, it's actually super easy. I use TYPO3 as my server-side-renderer. WHAT? Yes!

For that I put In an standard sitepackage, the TYPO3 generated HTML simply into the div#app  and added a small viewhelper for the JS and CSS files in the /dist of my Vue app.

Layouts/Default.hmtl

{namespace vue=Exotec\VueSitepackage\ViewHelpers}

<div id="app">
    <f:spaceless>
        <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '1'}" />
        <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '0'}" />
        <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '2'}" />
    </f:spaceless>
</div>

<vue:assets path="/typo3conf/ext/vue_sitepackage/Resources/Public/JavaScript/dist"/>

Thereby the complete HTML code with our pages content is now visible for every bot or crawler, instead a boring empty div#app

And to get rid of the browser/axios cache, I found this solution.

And with this TS condition I switch between headless and my sitepackage requests, so both cn run in the same TYPO3

[request.getNormalizedParams().getHttpHost() == 'vue-sitepackage.exotec.de']
   <INCLUDE_TYPOSCRIPT: source="FILE:EXT:vue_sitepackage/Configuration/TypoScript/setup.typoscript">

[request.getNormalizedParams().getHttpHost() == 'api.exotec.de']
    <INCLUDE_TYPOSCRIPT: source="FILE:EXT:headless/Configuration/TypoScript/setup.typoscript">
 
[end]