Nuxt 3.10.2 & RC.38 Not Found?

[markus-gx]

OG:Image seems to be broken with Nuxt 3.10.2 and latest nuxt-og-image version at least in my setup.

//nuxt.config.ts
site: {
    url: process.env.DOMAIN,
  },

export const modules: NuxtConfig['modules'] = [
  [
    '@storyblok/nuxt',
    {
      accessToken: process.env.STORYBLOK_API_KEY,
      useApiClient: true,
      componentsDir: false,
    },
  ],
  '@nuxtjs/tailwindcss',
  '@pinia/nuxt',
  '@nuxt/image',
  '@nuxtjs/turnstile',
  '@vueuse/nuxt',
  ['nuxt-jsonld', { disableOptionsAPI: true }],
  'nuxt-og-image',
  ...prodModules,
]

//[...slugs].vue
defineOgImageComponent('NuxtSeo')

Any suggestions or fixes I can try? Thanks.

[just-maik]

Having the same issue in my nuxt project. But when I try to create a reproduction on stackblitz it works... I'm wondering if some nested routes or other modules are responsible 🤔

[just-maik]

I think it's not because of modules but I'll dump my nuxi info result here. (I installed nuxt-og-image via @nuxtjs/seo)

• Operating System: Linux
• Node Version: v18.17.1
• Nuxt Version: 3.10.3
• CLI Version: 3.10.1
• Nitro Version: 2.8.1
• Package Manager: bun@1.0.28
• User Config: telemetry, modules, site, ogImage, sitemap, robots, seo, seoExperiments, linkChecker, nuxtRateLimit, devtools, tailwindcss, nitro, runtimeConfig, graphql-client, security, app
• Runtime Modules: @nuxtjs/seo@2.0.0-rc.8, @vueuse/nuxt@10.8.0, @nuxtjs/device@3.1.1, nuxt-security@1.2.1, nuxt-graphql-client@0.2.33, nuxt-typed-router@3.6.1, nuxt-icon@0.6.8, @nuxt/image@1.3.0, @dargmuesli/nuxt-cookie-control@7.3.0, @nuxtjs/tailwindcss@6.11.4, nuxt-rate-limit@1.2.0, @formkit/auto-animate/nuxt@0.8.1

@markus-gx maybe you could do the same using nuxi info, just to see if there are any suspicious overlaps.

[markus-gx]

Sure @just-maik

------------------------------
- Operating System: Darwin
- Node Version:     v20.5.1
- Nuxt Version:     3.10.2
- CLI Version:      3.10.1
- Nitro Version:    2.8.1
- Package Manager:  yarn@4.0.2
- Builder:          -
- User Config:      srcDir, app, hooks, turnstile, runtimeConfig, css, components, modules, image, security, vite, extends
- Runtime Modules:  @storyblok/nuxt@6.0.4, @nuxtjs/tailwindcss@6.11.4, @pinia/nuxt@0.5.1, @nuxt/image@1.3.0, @nuxtjs/turnstile@0.6.3, @vueuse/nuxt@10.7.2, nuxt-jsonld@2.0.8, nuxt-security@1.1.2
- Build Modules:    -
------------------------------

[harlan-zw]

I'll need a reproduction to investigate further, there's a starter here.

[just-maik]

I suspect nuxt/security to be the culprit. But just to make sure before I try to reproduce this, are you doing any complex redirection / route logic that is not part of routeRules or the folder structure @markus-gx? Because that's part of my application and would be the only other possible cause that I can think of right now.

[markus-gx]

It seems the reason is a catchAll route.

pages/[...slugs].vue

After adding this OG:Image DevTools is not working anymore. Since I am using a CMS in the background the catchAll route is necessary to build pages.

Reproduction: https://stackblitz.com/edit/nuxt-starter-8iz6ui?file=app.vue

[harlan-zw]

Thanks, will investigate further in the next couple of days.

[harlan-zw]

Seems to be fixed with RC 47 https://stackblitz.com/edit/nuxt-starter-enusw3?file=package.json