Skip to content

TYPO3-Headless/nuxt-typo3

Repository files navigation

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