Skip to content

Latest commit

 

History

History
 
 

docs

Introduction

TYPO3 module for Nuxt.js and TYPO3 headless provides API handling and frontend rendering.

nuxt-typo3

npm downloads npm version standard js License

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 API we use Unknown Dynamic Nested Routes Pattern. (We don't know exactly what pages are defined in the backend). What this plugin is doing to resolve TYPO3 data is just hook in Nuxt.js navigation cycle to provide page data for frontend and SSR context.

  1. First call to API is executing during nuxtServerInit Action and is responsible for getting initialData for your application like languages, main navigations etc. This call is executing in SSR context (first hit) and also when language on the website has been changed - then we want to get initialData again for correct language.
  2. Second call to API is calling to get current page data information - is calling 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 here in frontend section.

Schema

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

Schema