I was wondering how the prismic toolbar works? How does it pick up what documents are being used on a page?
The content people I am in touch with are excited to use it, but I am seeing big issues with it in my project (Nuxt 3).
Very often the toolbar does not show up, sometimes it shows up and displays some but not all relevant documents and often it goes away when navigating to a different page.
Is there anything obvious to look into?
Hi @leopold,
Documents not showing in the toolbar
The toolbar has some limitations, especially when used with static sites. In order for the toolbar to know a page uses certain Prismic documents, content requests need to send a specific piece of metadata with the request. Specifically, it sends the value of the io.prismic.preview cookie as the requests's ref.
Because static sites are typically built on a server, a user's cookie does not exist. Thus, the toolbar doesn't have any documents to link to a particular page on your website.
We have ideas on how to improve the toolbar and ensure it works in every website, but we have not made any changes to the toolbar yet.
There is a workaround you could try, but it is not something we recommend: you can perform a client-side request on every page for the documents you want to show in the toolbar. This will negatively impact website performance, which is why we do not recommend it in most cases. You can get creative with this workaround, however, such as crawling your site in a separate environment to send the necessary requests.
Toolbar visibility
The toolbar should show up if you are logged in to Prismic. Note that a Prismic user session usually only lasts for 24 hours, at which time you are logged out.
It's possible the toolbar does not show up if there are no associated documents on the page. The logic is that if there are no Prismic documents on the page, there is no need to show the Edit button (i.e. the toolbar). Of course, this isn't always the case since it's possible the toolbar does not know about the documents used on the page.
The issues I currently have are actually not on a static site. It is an SSR app on Vercel.
Hi Leopold,
The issues Angelo described also apply to server-side rendering for the same reasons.
According to this logic, it is strange that the Toolbar goes away when navigating, right? While navigating I am performing client side requests, since Nuxt is essentially just a SPA after the initial render.
For the sake of reliability, I think it would be great if I could define the documents for each page using some type of metadata and the toolbar would simply read that.
According to this logic, it is strange that the Toolbar goes away when navigating, right? While navigating I am performing client side requests, since Nuxt is essentially just a SPA after the initial render.
The toolbar listens to browser events and resets itself on each pushState and replaceState. It effectively treats client-side navigation as a full browser navigation, which lets the toolbar re-check which documents are active for the new URL.
Re: the SSR compatibility â Provided you are using @nuxtjs/prismic, the io.prismic.preview cookie value should already be sent along with each requests. That behavior is only disabled if you set preview: false in @nuxtjs/prismic's options.
I just tried it out myself with SSR and also could not get the toolbar to appear, however. Maybe there is something buggy happening with the toolbar that shouldn't occur.
For the sake of reliability, I think it would be great if I could define the documents for each page using some type of metadata and the toolbar would simply read that.
This is one of the ideas we prototyped:
This would let developers declare which documents are active on the page. Because declaring a document is as simple as a meta tag (or a JavaScript call in a different version of this idea), developers can control exactly which documents appear in the toolbar's list. This is especially helpful when you don't want to list a document that appears on the page, such as a list of recent blog posts.
Unfortunately, the idea was not pursuedânot because the idea was rejected, but because we did not have resources to continue.
This limitation is still on our radar, however, and we continue to think of more general solutions to this problem.
That is a shame. I think the toolbar is generally a good simple solution, it just needs to work. If it doesn't it is simply quite annoying and I spent a bit of time trying to figure out what was wrong.
PS: if you get logged out you get an error in the console from the Toolbar. If you log back in, this goes away.
Hey @leopold, we definitely hear you and understand the frustration. To be transparent, we don't have immediate plans to work on the toolbar as we are currently working on some big Slice Machine improvements.
The toolbar is still used to make content previews work. As such, we recommend keeping it in place even if the document editing feature doesn't alway work, as you have experienced.
