Trouble previewing menu Nuxt.js production

Hey I have try your fixees and it seem to work now, although I am not sure exactly what fix it.

Now the preview work on my pages, but not with my partials modules like my navigation menu. The preview seems to be activated, but the new saved changes to theses partials are not visible, again only in my prod environnement (preview mode in local work as expected - see screenshots).

Any ideas why this is not working in my prod env on netlify ?

Here is my vuex code for loading my partials :

export const state = () => ({
  header: {},
})
export const mutations = {
  setHeader(state, value) {
    state.header = value
  }
}
export const actions = {
  async loadPartials({ commit }) {
    const partials = await this.$prismic.api.query(
      this.$prismic.predicates.at('document.type', 'menu')
    )
    const header = partials.results.find((x) => x.uid === 'header').data
  }
}

Thanks for your help !

Hi Corinne,

So I talked with the team and it seems there is a small issue with Previewing content coming from the vuex store. They are aware of this and plan to work on it in the next week or 2.

So I'm not sure there's anything you can do to resolve this at the minute. I'm sorry for the inconvenience this has caused you in the time being.

Hi Phil, thanks for the reply.
It is fine, I will wait for the release !
Please, tell me when it will be fix. :slight_smile:

Hey, any news on this ?

There's been no advancement on this unfortunately as the team has been super busy. They plan to get sometime next week and I'm staying on top of this.

Can you send me a copy of your project so I can recreate this on my end for the team to properly debug? It would be really helpful.

Thanks.

Hey !
Sorry about the delay.
Here is a 'minimal' nuxt repo from a prismic demo (github.com/prismicio/nuxtjs-blog.git)

Demo :
https://prismicpreviewstore.netlify.app/

Git repo :

Prismic repo :
https://testbugpreview.prismic.io/

To reproduce the bug, you can edit the document "menu", save it and hit the Netlify preview.
You will see that on the first load the preview is not working until you click on a link.

Maybe the problem is that the data is fetch from prismic before the preview mode is activated ?

#default.vue
async middleware({ store, $prismic }) {
    await store.dispatch("loadPartials", $prismic);
},

Thanks for getting back to me on this. I'll have to find time to get a look at it, but I believe it's something to do with the store and preview mode as you suggested.

1 Like

OK, we were able to recreate the bug thanks to your example and we're chatting with Nuxt to figure out whether it's a feature or a valid bug.

In the meantime a quick fix involves calling:

await context.store.dispatch("loadPartials", context.prismic);

From each pages asyncData hooks, or from their similar fetch hooks:

await this.$store.dispatch("loadPartials", this.$prismic);

If this is confirmed a valid bug only calling:

#default.vue
async fetch() {
await this.$store.dispatch("loadPartials", this.$prismic);
}

like we used to do (instead of middleware ) should do the trick.

1 Like