I'm trying to integrate a vue.js application into a typo3 page.
I have a full functional TYPO3 instance where I can create own pages, edit the content and more. Now I want to add an existing vue.js application within this page.
Therefore I created an extension which added all necessary resources (js, css) and added an own content type which controls the integrations and configurations. The content type outputs a vue.js entry point. So far everything works. Smaller vue.js applications works as they should.
Now comes the challenge: When I want to create a more complex application which relies on the router functionality, I run into a problem.
Let's assume, I integrate my application into the page /shop
and my application tries to render a product under /shop/product/some-id
. This doesn't work. The URL processing is done by TYPO3 (as designed).
I tried to find a solution within the documentation but I'm not sure what I should search. I need a way to output the same page (/shop
) regardless the following path. Does someone have a hint?
I found a solution. Within TYPO3 v8 is it possible to use the realurl extension for this purpose.
It is possible to define an own decode preprocessing function and analyse the current url.
$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['realurl']['decodeSpURL_preProc'][] = RealUrlManipulation::class . '->decodeSpURL_preProc';
Within this method is it possible to change the url for TYPO3 inner processing and set it to an known url.