Setup

Learn how to set up the nuxt-typo3 module in your Nuxt 3 application.

There are two ways of setting up a Nuxt-TYPO3 project:

  1. Initialize a fresh Nuxt project with the required structure.
  2. Add the Nuxt-TYPO3 module to your existing Nuxt 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>
pnpm
pnpm dlx nuxi@latest init -t gh:TYPO3-Headless/nuxt-typo3-starter <project-name>
Please remember to set up your API URL. Read more here.

Module installation


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

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

npx nuxi@latest module add typo3

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'
    }
  }
})