Learn Nuxt with a Collection of 100+ Tips!

typo3
typo3

TYPO3 Headless Frontend Rendering module

T3H Logo'

nuxt-typo3

TYPO3 Headless Frontend Rendering module based on Nuxt and Vue.js

Features

  • ๐ŸŒ Handling of dynamic API Routes provided by Headless EXT
  • ๐Ÿ–ผ๏ธ Frontend and backend layouts
  • ๐Ÿงฉ Support for most standard TYPO3 Content Elements
  • โœจ Easily customizable
  • ๐ŸŒ Multilanguage support
  • ๐Ÿ“ˆ SEO Support
  • ๐Ÿš€ Server Side ready

Setup

Learn how to setup nuxt-typo3 module in your Nuxt 3 application.

You can also use the playground on StackBlitz

Kickstart nuxt-typo3 project

You can use the nuxi init command to initialize a fresh Nuxt project with the required nuxt-typo3 setup. Learn more about nuxi

npx
npx nuxi@latest init -t gh:TYPO3-Headless/nuxt-typo3-starter <project-name>

Instalation nuxt-typo3 module

Add @t3headless/nuxt-typo3 dev dependency to your project:

yarn
yarn add --dev @t3headless/nuxt-typo3
npm
npm install @t3headless/nuxt-typo3 --save-dev

Then, add @t3headless/nuxt-typo3 to the modules section of your Nuxt configuration:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@t3headless/nuxt-typo3'],
  typo3: {
    api: {
      baseUrl: 'https://api.t3pwa.com'
    }
  }
})

Check out the Nuxt 3 documentation for more information about installing and using modules.

Development

  • Run npm run dev:prepare to generate type stubs.
  • Use npm run dev to start playground in development mode.