Full example of live-preview/presentation setup?

[notflip]

In the docs I see that with the minimal setup, the live editing should work, I've set my config to:

  sanity: {
    projectId: process.env.NUXT_SANITY_PROJECT_ID,
    dataset: process.env.NUXT_SANITY_DATASET,
    visualEditing: {
      token: process.env.NUXT_SANITY_VISUAL_EDITING_TOKEN,
      studioUrl: process.env.NUXT_SANITY_VISUAL_EDITING_STUDIO_URL,
    }
  },

But I get the error Unable to connect to visual editing. Make sure you've setup '@sanity/visual-editing' correctly. Is there something else that needs to be done? Besides setting up the presentation tool in the Studio?

Thanks

[LKosters]

@notflip For an example, I would advise you to look in the playground folder in the repository. When I use the code from there (with my Sanity credentials), visual editing works correctly.

[notflip]

@LKosters Thanks for getting back to me, It's not really clear, once following the examples, how to use this feature?

• Does the /preview/enable or preview/disable route have to be used? for example?
• Do we need to create a plugin of sorts, such as in this example: https://github.com/nuxt-modules/sanity/issues/45#issuecomment-724657355?

[LKosters]

@notflip the preview routes are are created when running npm run dev/building the app, the only thing you need to setup to use those routes is the following code in your sanity config

presentationTool({
  previewUrl: {
    origin: 'http://localhost:3000',
    previewMode: {
      enable: '/preview/enable',
      disable: '/preview/disable',
    },
  },
}),

[jesperbjerke]

@notflip Make sure you have apiVersion set to something. It defaults to "1" which is not allowed for the visual editing. Must be a date later than "2021-03-25"

[notflip]

Thanks @jesperbjerke @LKosters, I used your setup, combined with this info https://github.com/nuxt-modules/sanity/issues/998#issuecomment-2141383923

However now I'm seeing

ERROR  [nitro] [unhandledRejection] Cannot read properties of null (reading 'data')
web dev:   at /Users/miguelstevens/Code/sanity-nuxt-atrium/node_modules/.pnpm/@nuxtjs+sanity@1.11.3_rollup@4.18.0/node_modules/@nuxtjs/sanity/dist/runtime/composables/visual-editing.mjs:176:35
web dev:   at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

@danielroe do you know what this might mean? Thanks everyone

[danielroe]

Probably you are accessing data in your template without checking it for a null value (such as if there is an error).

[notflip]

Probably you are accessing data in your template without checking it for a null value (such as if there is an error).

Right! If I remove all logic from my index.vue the preview mode seems to be working, all good now, thanks for the support