Use Pinia Store

By default, the nuxt-typo3 module uses useState to store all needed information. If you want to implement the Pinia Store instead, please follow the guide below.

1. Configure Pinia

Start by installing and configuring the Pinia module by following the guide available here.

2. Create store

Next, create a new file named typo3.ts inside the store directory:

store/typo3.ts
import { defineStore } from "pinia";
import type { T3InitialData, T3Page } from "@t3headless/nuxt-typo3";

interface State {
  initialData: T3InitialData | null,
  pageData: T3Page | null
}

export const useT3Store = defineStore('typo3', {
  state: (): State => ({ initialData: null, pageData: null }),
})

This script defines a new store named typo3, which holds initialData and pageData.

3. Use hooks

To update your store with the new initialData or pageData, you can use hooks.

Add a new file named typo3.ts inside the plugins directory:

plugins/typo3.ts
import { useT3Store } from '~~/store/typo3'

export default defineNuxtPlugin((nuxtApp) => {
  const { pageData, initialData } = useT3Api()
  const store = useT3Store()

  store.initialData = initialData.value
  store.pageData = pageData.value

  nuxtApp.hook('t3:initialData', (data) => {
    store.initialData = data
  })
  nuxtApp.hook('t3:page', (data) => {
    store.pageData = data
  })
})
You can use async/await in callback functions.

4. Add page file

Finally, add a new file inside the pages directory to display data directly from the store.

Add pages/[...slug].vue file:

pages/[...slug
<template>
  <T3BackendLayout
    v-if="pageData?.content"
    :name="backendLayout"
    :content="pageData.content"
  />
</template>
<script lang="ts" setup>
import { useT3Store } from '~/store/typo3'
const { headData, backendLayout } = await useT3Page()
useHead(headData)
const store = useT3Store()
// create local ref to avoid double rendering and state sharing between pages
const pageData = ref(store.pageData)
</script>

In this file, the useT3Store function is called to get a reference to the typo3 store. The pageData property is then extracted from the store, and its content is passed as a prop to the T3BackendLayout component.