nuxt-typo3 - NUXT3 - TYPO3 12 - basic concepts of nuxt-typo3?

40 Views Asked by At

I'm hosting a TYPO3 installation at the provider Mittwald with an API Endpoint on http://

NUXT3 TYPO3 12

and "nuxt-typo3" Module in my NUXT Frontend App on local host with Visual Studio Code

  • a. SSR works but not the menu

  • b. as sonn as there is a "pages" folder it doesn't get the content

  • c. changing T3-Elements.vue is not working

  • d. what are the basic concepts or idea behind "nuxt-typo3", is there a best practice

  • e. no information online available

If I do the standard installation with just "App.vue" and <NuxtPage /> I get the content and also with a default layouts the Naviagation:

layouts/default.vue

<template>
    <div>
      <header v-if="navigation">
        <NuxtLink
          v-for="{ link, title } in navigation"
          :key="link"
          :to="link"
        >
          {{ title }}
        </NuxtLink>
      </header>
      <slot />
    </div>
  </template>

SSR works but if I click on the Menu I get CORS warning in the console and no more content.

2nd Issue

As soon as I create a "pages" folder in my Nuxt frontend nuxt-typo3 is no more delivering the content from App.vue <NuxtPage />

App.vue

<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>

tying to fetch data independed from nuxt-typo3 works:

const url = "http://typo3-composer.p661210.webspaceconfig.de/home";

const text = ref(null);
const imgUrl = ref(null);
const imgAlt = ref(null);

const { data } = await useFetch(url);

text.value = data.value.content.colPos0[0].content.bodytext;

imgUrl.value =
  data.value.content.colPos0[1].content.gallery.rows["1"].columns[
    "1"
  ].publicUrl;
imgAlt.value =
  data.value.content.colPos0[1].content.gallery.rows["1"].columns[
    "1"
  ].properties.alternative;

Big Questions:

  • What is the concept of nuxt-typo3?

  • Is it fetching all data of all pages in one go?

  • What is the general approach, idea behind it to handle the API data inside NUXT3?

  • What about security dev and production mode? How can I access it and design my single pages?

  • To change the standard TYPO3 content elements vue modules didn't work for in my case?

  • Can/should I change it on a page by page base or just general and use CSS not to see content?

  • Is there an data object with the TYPO3 content, that I can use and destructure to my needs?

  • Can I do additional fetches using the T3API?

Didn't find any concepts and explanations, only that the company behind it offers courses for thousands of Euros.

THANKS for giving some hints!

0

There are 0 best solutions below