Nuxt3: "StoryblokComponent" does not prerender correctly

[pat-behrendt]

hiho,

i don't know, if this is a problem with my config or a general probpem with the SDK, but i really have to figure out a solution for this problem, cause this behavior is the opposite of the reason why we/ people are using nuxt.

I simply want, if i prerender the pages through nuxt with nuxt generate or nuxt build in nuxt3, that the output is simple html, without any web components. it looks like as soon as i use the recommented <StoryblokComponent /> the (pre-)renderer stop to work from this point on (also in tests without fetch/ using static objects for this component).

here i have an example-page with a "normal" component (blue) in it , normal text/ html-element (violet) and once dynamic components with "StoryblokComponent" (green) and "component" (yellow) - in both cases a simple paragraph and a button.

when i generate the static html with nuxt generate, it will output the page as follow:

.. every component is prerendered as expected, but not the components from the <StoryblokComponent /> 🙈. how can i / we change this?

thx 4 help :)

---

package.json:

  "scripts": {
    "dev": "nuxt dev --https --ssl-cert localhost.pem --ssl-key localhost-key.pem",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "@types/vue-select": "^3.16.1",
    "nuxt": "3.0.0-rc.8"
  },
  "dependencies": {
    "@pinia/nuxt": "^0.4.0",
    "@storyblok/nuxt": "^4.3.0",
    "@vuelidate/core": "^2.0.0-alpha.44",
    "@vuelidate/validators": "^2.0.0-alpha.31",
    "axios": "^0.27.2",
    "pinia": "^2.0.18",
    "vue-select": "^4.0.0-beta.3",
    "vue3-popper": "^1.5.0"
  }

nuxt.config.js:

export default defineNuxtConfig({
    mode: 'universal',

    buildModules: [
        '@pinia/nuxt'
    ],

    /*
    ** Headers of the page
    */
    head: {
      title: pkg.name,
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: pkg.description }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ]
    },

    modules: [
      [
        '@storyblok/nuxt'
      ]
    ],

    /*
    ** MODULE-CONFIG: Storyblok  --> see: https://github.com/storyblok/storyblok-nuxt
    */
    storyblok: { 
      accessToken: 'xxx',
      bridge: process.env.NODE_ENV !== 'production',
      apiOptions: { // --> see: https://github.com/storyblok/storyblok-js-client#class-storyblok
        cache: { 
          type: "none" 
        }
      },
      useApiClient: true
    },


  /*
  ** Global variables
  */
  runtimeConfig: {
    // The private keys which are only available within server-side
    apiSecret: 'xxx',
    // Keys within public, will be also exposed to the client-side
    public: {
      serverUrl: 'xxx'
      
    }
  },

  /*
  ** Global CSS
  */
  css: [
    '~/assets/styles/main.css',
    '~/assets/styles/fonts.css',
  ],

  html: { 
    minify: { 
      collapseBooleanAttributes: true, 
      decodeEntities: true, 
      minifyCSS: true, 
      minifyJS: true, 
      processConditionalComments: false, 
      removeEmptyAttributes: true, 
      removeRedundantAttributes: true, 
      trimCustomFragments: true, 
      useShortDoctype: true 
    } 
  },

  ssr: true,  // https://v3.nuxtjs.org/guide/deploy/static-hosting/

  /*
  ** "nuxt generate" config
  */
  generate: {
    crawler: false,  // crawler jumps like google with links trough the app/ site and tries so to get all relevant routes
    devtools: process.env.NODE_ENV === 'development',
    routes: [
      '/',
    ]
  },

  /*
  ** nitro config (e.g.: ssr-prerendering / "nuxt build")
  */
  nitro: {
    prerender: {
      routes: [
        '/services/wizpages/treppenlift',
        '/services/wizpages/rollstuhl',
        '/',
      ]
    }
  }

[Dawntraoz]

This one seems to be related #142. Let's catch up in our call on the state of this one and if something has changed from that issue or not @alexjoverm.

[pat-behrendt]

was resolves in v4.x.x 👍