nuxt-typo3

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

• ✨ Release Notes
• 📖 Documentation

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 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:

npx nuxi@latest module add typo3

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

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.