Samuelreichoer Posts - Answer Overflow

Samuelreichoer

•Created by Samuelreichoer on 3/2/2025 in #❓・help

runWithContext not working as expected

I have following async composable:

import type { CraftSite } from 'vue-craftcms'
type SeoData = {
  MetaTitleContainer: { title?: { title: string } }
}

export async function useCraftSeoMatic(uri?: string | Ref<string>, site?: CraftSite | Ref<CraftSite>) {
  const { baseUrl, siteMap } = useRuntimeConfig().public.craftcms
  const currentUri = uri ? ref(uri) : useCraftUri()
  const apiEndpoint = computed(() =>
    `${baseUrl}/actions/seomatic/meta-container/all-meta-containers/?asArray=true&uri=${encodeURIComponent(currentUri.value)}`,
  )

  const { data: seoMaticData, error } = await useAsyncData(
      'seoMaticData',
      async () => {
        const response = await $fetch<SeoData>(apiEndpoint.value)
        if (!response || typeof response !== 'object') {
          console.error('Transformation of SEOmatic data failed, please verify that the SEOmatic endpoint is working correctly')
          return undefined
        }
        return {
          title: response.MetaTitleContainer?.title?.title ?? '',
        };
      }
  )

  if(error.value) {
    console.error(error.value)
  }

  const app = useNuxtApp()

  app.runWithContext(() => {
    useHead({
      title: seoMaticData.value?.title,
    })
  })
}

import type { CraftSite } from 'vue-craftcms'
type SeoData = {
  MetaTitleContainer: { title?: { title: string } }
}

export async function useCraftSeoMatic(uri?: string | Ref<string>, site?: CraftSite | Ref<CraftSite>) {
  const { baseUrl, siteMap } = useRuntimeConfig().public.craftcms
  const currentUri = uri ? ref(uri) : useCraftUri()
  const apiEndpoint = computed(() =>
    `${baseUrl}/actions/seomatic/meta-container/all-meta-containers/?asArray=true&uri=${encodeURIComponent(currentUri.value)}`,
  )

  const { data: seoMaticData, error } = await useAsyncData(
      'seoMaticData',
      async () => {
        const response = await $fetch<SeoData>(apiEndpoint.value)
        if (!response || typeof response !== 'object') {
          console.error('Transformation of SEOmatic data failed, please verify that the SEOmatic endpoint is working correctly')
          return undefined
        }
        return {
          title: response.MetaTitleContainer?.title?.title ?? '',
        };
      }
  )

  if(error.value) {
    console.error(error.value)
  }

  const app = useNuxtApp()

  app.runWithContext(() => {
    useHead({
      title: seoMaticData.value?.title,
    })
  })
}

and i use it like that in the app.vue

<script setup lang="ts">
// Fetch & apply seomatic properties
await useCraftSeoMatic()
</script>

<script setup lang="ts">
// Fetch & apply seomatic properties
await useCraftSeoMatic()
</script>

Why do I still get that error A composable that requires access to the Nuxt instance

16 replies

NNuxt

•Created by Samuelreichoer on 3/1/2025 in #❓・help

Prerendering not working

Hi, I use nuxt with ddev and craft cms. So basically I run ddev npm run dev for starting the dev server -> Nuxt runs in docker on that url http://0.0.0.0:3000 and gets proxied by the nginx server. Therefor I am able to see the frontend on https://craft-nuxt-starter.ddev.site. When using the dev mode or build script I see no error and data fetching from the https://craft-nuxt-starter.ddev.site/v1/api/xxxx works perfectly. My nuxt config looks like that:

export default defineNuxtConfig({
  devServer: {
    host: '0.0.0.0',
    port: 3000,
  },
  hooks: {
    async 'prerender:routes'(ctx) {
      const resp = await fetch('https://craft-nuxt-starter.ddev.site/v1/api/queryApi/allRoutes?siteIds=%5B1%2C2%2C3%5D').then(
        res => res.json(),
      )
      for (const page of resp) {
        const formatedPage = page.replace(process.env.NUXT_PRIMARY_SITE_URL, '')
        ctx.routes.add(formatedPage)
      }
    },
  },
})

export default defineNuxtConfig({
  devServer: {
    host: '0.0.0.0',
    port: 3000,
  },
  hooks: {
    async 'prerender:routes'(ctx) {
      const resp = await fetch('https://craft-nuxt-starter.ddev.site/v1/api/queryApi/allRoutes?siteIds=%5B1%2C2%2C3%5D').then(
        res => res.json(),
      )
      for (const page of resp) {
        const formatedPage = page.replace(process.env.NUXT_PRIMARY_SITE_URL, '')
        ctx.routes.add(formatedPage)
      }
    },
  },
})

But when I try to generate the site it throws following errors for every page:

  ├─ /es/noticias/fat-cat (271ms)                                                                                                                                                                nitro 2:14:59 PM
  │ └── [500]

  ├─ /es/noticias/fat-cat (271ms)                                                                                                                                                                nitro 2:14:59 PM
  │ └── [500]

The fetch from the prerender hook works but the api calls in the pages to get the data not.

103 replies

NNuxt

•Created by Samuelreichoer on 11/18/2024 in #❓・help

Lazysizes hydration missmatch

5 replies

NNuxt

•Created by Samuelreichoer on 11/7/2024 in #❓・help

Fetch Data server and client side module recommended way

I am building a querybuilder for Craft CMS and I need to somehow make fetches on client and server side. I tried to do that with useFetch like that

async function fetchFn(url: string): Promise<FetchResult> {
  const { data, error } = await useFetch(url)
  return { data, error }
}

async function fetchFn(url: string): Promise<FetchResult> {
  const { data, error } = await useFetch(url)
  return { data, error }
}

But that only works on client side?! I am confused. What is the recommended way to do that? Maybe like that? https://nuxt.com/docs/guide/recipes/custom-usefetch#custom-usefetch

10 replies

NNuxt

•Created by Samuelreichoer on 9/10/2024 in #❓・help

Multiple gtm containers Recommendation

I would like to know what the recommended way is to include two gtm containers in a nuxt3 project. One of the containers is a serverside tracking container. Do modules like nuxt scripts or nuxt-gtag support serverside tracking at all?

2 replies

Gaming

Programming