Introduction

TYPO3 module for Nuxt.js (opens new window) and TYPO3 headless (opens new window) provides API handling and frontend rendering.

Features

✅ Handle dynamic API routes

✅ Frontend layouts

✅ Backend layouts

✅ Multilanguage

✅ Meta tags provided by API

✅ Most of the standard TYPO3 Content Elements (in progress)

✅ SSR Ready

How it works

To handle dynamic routes provided by an API we use Unknown Dynamic Nested Routes Pattern (opens new window). (We don't know exactly what pages are defined in the backend). What this plugin is doing to resolve TYPO3 data is just hook into the Nuxt.js navigation cycle to provide page data for the frontend and the SSR context.

1. The first call to the API is executed during nuxtServerInit Action (opens new window) and is responsible for getting initial data for your application like languages, main navigations etc. This call is executed in SSR context (first hit) and also when the language on the website has been changed - then we want to get the initial data again for the correct language.
2. The second call to the API gets the current page data information. It is executed on first hit and also on each route change.

On the frontend we have implemeneted some helper components to handle main features of TYPO3 frontend. Read more in frontend section (opens new window).

Schema

This schema shows how the Nuxt.js navigation cycle was changed.