Samuelreichoer Posts - Answer Overflow

Samuelreichoer

•Created by Samuelreichoer on 4/29/2025 in #❓・help

vitest not working with imports form '#app'

I use vitest for tests and I want to still use '#app' imports like: import { useRuntimeConfig, useRoute, createError, useRequestURL, useFetch } from '#app' Unfortunately I get this error when running tests FAIL tests/composables/useCraftQuery.test.ts [ tests/composables/useCraftQuery.test.ts ] Error: Cannot find module '#app' imported from '/Users/samuel/Documents/b-privat-projekte/a-repos/nuxt-craftcms/src/runtime/composables/useComposables.ts' ❯ src/runtime/composables/useComposables.ts:4:1 2| import { defu } from 'defu' 3| import { getBearerToken, getCurrentSite, getSiteUri } from '../utils/helper' 4| import { useRuntimeConfig, useRoute, createError, useRequestURL, useFetch } from '#app' | ^ 5| import type { UseFetchOptions } from '#app' 6| import { computed, toValue } from '#imports' Caused by: Error: Failed to load url #app (resolved id: #app) in /Users/samuel/Documents/b-privat-projekte/a-repos/nuxt-craftcms/src/runtime/composables/useComposables.ts. Does the file exist? ❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-BMIURPaQ.js:35688:17

8 replies

NNuxt

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

Hide secret token in plugin install options

How do I properly hide a secret token used in plugin options?

20 replies

NNuxt

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

Custom Fetch Types not align

I have following custom composable function: import type { UseFetchOptions } from '#app' export function useCraftFetch<T>( url: string | Request | Ref<string | Request> | (() => string | Request), options: UseFetchOptions<T> = {} ) { const { authToken } = useRuntimeConfig().public.craftcms const headers = { 'Authorization': authToken, } const customOptions: UseFetchOptions<T> = { ...options, headers: { ...headers, ...(options.headers || {}) } } return useFetch<T>(url, customOptions) } And I get a ts error in the useFetch part where customOptions is set. Why is that?

23 replies

NNuxt

•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