Disabling Prismic's prismic.min.js preview JavaScript in Nuxt.js

Prismic has quite a nice preview feature that allows you to open a piece of content in Prismic and preview it directly on your website.

However, the JavaScript that Prismic uses for this is pretty massive at nearly 200kb and seems to pull in jQuery. Gross.

If you are loading this on a production site, you aren't giving your users the optimal experience and it gives a pretty serious performance hit in Google Lighthouse. It's likely to affect SEO scores too.

The Prismic Nuxt.js docs don't cover how to disable this feature and from my initial reading around the web, it looked as though this couldn't be removed. However, after a bit of digging through the GitHub project repo I found you can disable this at build time!

Disable the Prismic Preview Script

In your nuxt.config.js file, add the following options object to your @nuxtjs/prismic module:

['@nuxtjs/prismic',{ preview: false }]

This will disabled Prismic's preview feature and not include the prismic.min.js file in your site's code. It would be a good idea to swap this preview option's setting out for an environment specific dotenv variable. This would allow you to have a preview / staging site against which you can preview content and the production site remains free of the Prismic preview JS.

Chicken dinner!