Trouble previewing menu Nuxt.js production

Developing with Prismic
1

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).

prismic-io-academiepotagere-com (1)
prismic-io-academiepotagere-com (1)1920Ă—969 61.3 KB

Accueil-L-Académie-Potagère
Accueil-L-Académie-Potagère1902×969 452 KB

Accueil-L-Académie-Potagère (1)
Accueil-L-Académie-Potagère (1)1902×912 444 KB

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 !

2

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.

3

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:

4

Hey, any news on this ?

5

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.

6

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);
},
7

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
8

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
11

Hey ! I have exactly the same problem with my nuxt repo.
I load partials from my default.vue template like this :

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

When I test preview in localhost, partials modification are showing, but not when I test on production environnement (nuxt static generate on netlify). Do you know if there is a workaround ?

13

Hi Team,

Menus must be previewed as part of a release with other documents, have you tried this?

So you have for example a release with:

  • A home page document
  • A menu document

You would then run the preview on the home page and you should be able to see the latest menu as well.

Can you try this out and tell me the behaviour you are seeing?

Thanks.