Preview error on nuxt 3 SSR using v3 module

Hello there, I’m having issues with the preview on nuxt 3 & @nuxtjs/prismic v3.

I configured the preview in prismic as such:

Domain: http://localhost:3000 Link resolver: /preview

When launching the preview, the server throws a 500 error, useHead is not defined.

I also deployed & configured it on Netlify, and I’m getting the same error in a live environment.

I also tried my luck making a custom preview file pages/preview.vue but I’m getting the same exact error.

Versions

• nuxt: 3.0.0-rc.4
• @nuxtjs/prismic: 3.0.0-alpha.5
• node: 16.14.2

Additional Details

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'
import svgLoader from 'vite-svg-loader'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  buildModules: [
    '@pinia/nuxt',
    '@vueuse/nuxt',
    '@intlify/nuxt3',
  ],
  
  modules: [
    '@nuxtjs/tailwindcss',
    '@nuxtjs/prismic',
  ],

  prismic: {
    endpoint: 'xxxx',
  },

  intlify: {
    localeDir: 'locales',
    vueI18n: {
      locale: 'en-gb',
      fallbackLocale: 'en-gb',
    }
  },

  components: {
    dirs: [
      { path: '~/components', global: false},
      { path: '~/slices', global: false },
    ],
  },

  runtimeConfig: {
    public: {
    }
  },

  vite: {
    plugins: [
      svgLoader(),
    ]
  }
})

nuxt dev console

  [Vue warn]: Unhandled error during execution of setup function 
    at <Preview onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/preview" >
  [nuxt] [request error] useHead is not defined
    at setup (./.nuxt/dist/server/server.mjs:22715:1)  
    at _sfc_main.setup (./.nuxt/dist/server/server.mjs:22755:23)  

.nuxt/dist/server/server.mjs

const _sfc_main = {
  __name: 'preview',
  setup(__props, { expose }) {
  expose();

useHead({ // <---- Error thrown here
	title: 'Prismic Preview - Loading'
})

// TODO: refactor into simple hook
const { client, options: { linkResolver } } = usePrismic()
const { push } = useRouter()
__vite_ssr_import_0__.onMounted(async () => {
	const redirectURL = await client.resolvePreviewURL({
		linkResolver,
		defaultURL: '/'
	})

	push(redirectURL ?? '/')
})

Steps to reproduce

• Install and configure @nuxtjs/prismic in nuxt.config.ts
• Setup preview on prismic
• Click the preview icon in UI
• Error useHead is not defined shows up

What is Expected?

Preview working properly

What is actually happening?

Error 500 useHead is not defined

[renardsas]

Thanks for the follow up and the commits 🙏🙏🙏🙏

And also a big thank you for this article: https://lihbr.com/blog/pushing-nuxt-js-static-generation-one-step-further At the time, this approach provided excellent performance

[lihbr]

Alright, 3.0.0-alpha.10 should be the one 🙏

Edit: Just tried with the production package, works as expected 👌