refactor: provide composable for prismic previews

docs/content/en/index.md

@@ -187,19 +187,8 @@ You can override the default preview page by creating a page at the route config
 </template>
 
 <script setup>
-// The following code is quite boilerplate for now, a simpler composable will be provided in the future
-import { onMounted } from 'vue'
-
-const { client, options: { linkResolver } } = usePrismic()
-const { push } = useRouter()
-onMounted(async () => {
-	const redirectURL = await client.resolvePreviewURL({
-		linkResolver,
-		defaultURL: '/'
-	})
-
-	push(redirectURL ?? '/')
-})
+// The following code is mandatory for starting previews when entering this page
+usePrismicPreview()
 </script>
 ```
 

playground/app/prismic/htmlSerializer.ts

@@ -2,8 +2,8 @@ import type * as prismicH from '@prismicio/helpers'
 
 const htmlSerializer: prismicH.HTMLMapSerializer = {
 	// Those are just examples, update them and add your own~
-	heading1: ({ children }) => '<h2>children</h2>',
-	paragraph: ({ children }) => '<p class="fooBar">children</p>'
+	heading1: ({ children }) => `<h2>${children}</h2>`,
+	paragraph: ({ children }) => `<p class="fooBar">${children}</p>`
 }
 
 export default htmlSerializer

src/module.ts

@@ -117,6 +117,11 @@ export default defineNuxtModule<PrismicModuleOptions>({
 				}
 			})
 		addAutoImport(composableAutoImports)
+		addAutoImport({
+			name: 'usePrismicPreview',
+			as: 'usePrismicPreview',
+			from: resolver.resolve('runtime/usePrismicPreview')
+		})
 
 		// Add preview route
 		if (mergedOptions.preview) {

src/runtime/preview.vue

@@ -3,31 +3,20 @@
 		<figure>
 			<img
 				src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNDAiIGhlaWdodD0iMzYiPgogIDxwYXRoIGZpbGw9IiMyMTI3MzUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTM1LjUzOCAxOC43NGwtMi42NTUtMi42NmExLjEyNiAxLjEyNiAwIDAgMS0uMzI5LS43OTZ2LTMuMjU2YzAtMy4wMDktLjMxMy00LjEtLjktNS4yYTYuMTI3IDYuMTI3IDAgMCAwLTIuNTQ2LTIuNTUxYy0xLjA5Ny0uNTg5LTIuMTg2LS45MDItNS4xODgtLjkwMmgtNC4yOTVhLjIyNS4yMjUgMCAwIDEtLjE1OC0uMzg0TDIyLjEyMi4zM2MuMjEtLjIxMS40OTYtLjMzLjc5NC0uMzNoMS40OTNjNC4wMDMgMCA1LjQ1NS40MTggNi45MTkgMS4yMDJhOC4xNjkgOC4xNjkgMCAwIDEgMy4zOTQgMy40MDJjLjc4MyAxLjQ2NyAxLjIgMi45MjIgMS4yIDYuOTMzdjcuMDQ1YS4yMjUuMjI1IDAgMCAxLS4zODQuMTU5ek0xNy4yMjIgMzUuNjE3bDIuNjU1LTIuNjYxYy4yMS0uMjExLjQ5Ni0uMzMuNzk0LS4zM2gzLjI0OWMzLjAwMiAwIDQuMDktLjMxMyA1LjE4OC0uOTAyYTYuMTI3IDYuMTI3IDAgMCAwIDIuNTQ2LTIuNTUxYy41ODctMS4xLjktMi4xOTEuOS01LjJ2LTQuMzA0YS4yMjUuMjI1IDAgMCAxIC4zODMtLjE1OWwyLjY1NiAyLjY2MWMuMjEuMjExLjMyOS40OTguMzI5Ljc5NnYxLjQ5N2MwIDQuMDExLS40MTcgNS40NjYtMS4yIDYuOTMzYTguMTY5IDguMTY5IDAgMCAxLTMuMzk0IDMuNDAyQzI5Ljg2NCAzNS41ODIgMjguNDEyIDM2IDI0LjQwOSAzNkgxNy4zOGEuMjI1LjIyNSAwIDAgMS0uMTU4LS4zODR6TS4zODMgMTcuMjU5TDMuMDQgMTkuOTJjLjIxLjIxMS4zMjkuNDk4LjMyOS43OTZ2My4yNTZjMCAzLjAwOS4zMTIgNC4xLjkgNS4yYTYuMTI3IDYuMTI3IDAgMCAwIDIuNTQ1IDIuNTUxYzEuMDk4LjU4OSAyLjE4Ny45MDIgNS4xODkuOTAyaDQuMjk0YS4yMjUuMjI1IDAgMCAxIC4xNi4zODRsLTIuNjU3IDIuNjYxYy0uMjEuMjExLS40OTYuMzMtLjc5My4zM2gtMS40OTRjLTQuMDAzIDAtNS40NTQtLjQxOC02LjkxOC0xLjIwMkE4LjE2OSA4LjE2OSAwIDAgMSAxLjIgMzEuMzk2Qy40MTcgMjkuOTI5IDAgMjguNDc0IDAgMjQuNDYzdi03LjA0NWEuMjI1LjIyNSAwIDAgMSAuMzgzLS4xNTl6TTE2LjA0NSAzLjA0NWMtLjIxMS4yMTEtLjQ5Ni4zMy0uNzk0LjMzaC0zLjI0OWMtMy4wMDIgMC00LjA5MS4zMTMtNS4xODkuOTAyYTYuMTI3IDYuMTI3IDAgMCAwLTIuNTQ2IDIuNTUxYy0uNTg3IDEuMS0uOSAyLjE5MS0uOSA1LjJ2NC4zMDRhLjIyNS4yMjUgMCAwIDEtLjM4My4xNTlMLjMzIDEzLjgzQTEuMTI2IDEuMTI2IDAgMCAxIDAgMTMuMDM0di0xLjQ5N2MwLTQuMDExLjQxNy01LjQ2NiAxLjItNi45MzNhOC4xNjkgOC4xNjkgMCAwIDEgMy4zOTQtMy40MDJDNi4wNTguNDE4IDcuNTEgMCAxMS41MTIgMGg3LjAzYS4yMjUuMjI1IDAgMCAxIC4xNTguMzg0bC0yLjY1NSAyLjY2MXptMTMuODg0IDEwLjA5MWwtMy42Mi0zLjQ2OGMtLjI0LS4yNC0uNTItLjQxNC0uODE5LS41MjNBMi4yMzYgMi4yMzYgMCAwIDAgMjQuNjk2IDlIMTQuMDFhLjIyNS4yMjUgMCAwIDEtLjE1OS0uMzg0bDIuNjU5LTIuNjYyYy4yMS0uMjEuNDk1LS4zMjkuNzkzLS4zMjloOC41MTZjMi40OCAwIDQuNDkgMi4wMTUgNC40OSA0LjV2Mi44NDlhLjIyNS4yMjUgMCAwIDEtLjM4LjE2MnptLTcuMTE1IDE2Ljg2MWwzLjQ2LTMuNjI5Yy4yNC0uMjQuNDE0LS41Mi41MjMtLjgyYTIuMjUgMi4yNSAwIDAgMCAuMTQ0LS43OTV2LTEwLjcxYS4yMjUuMjI1IDAgMCAxIC4zODQtLjE1OWwyLjY1NiAyLjY2NGMuMjEuMjExLjMyOC40OTcuMzI4Ljc5NnY4LjUzNGMwIDIuNDg1LTIuMDEgNC41LTQuNDkgNC41aC0yLjg0M2EuMjI1LjIyNSAwIDAgMS0uMTYyLS4zOHpNNS45OTIgMjIuODY0bDMuNjIyIDMuNDY4Yy4yMzkuMjQuNTIuNDE0LjgxOC41MjMuMjQ2LjA5NC41MTQuMTQ1Ljc5NC4xNDVoMTAuNjg2YS4yMjUuMjI1IDAgMCAxIC4xNTguMzg0bC0yLjY1OCAyLjY2MmMtLjIxLjIxLS40OTYuMzI5LS43OTMuMzI5aC04LjUxNmE0LjQ5NSA0LjQ5NSAwIDAgMS00LjQ5LTQuNXYtMi44NDlhLjIyNS4yMjUgMCAwIDEgLjM4LS4xNjJ6bTcuMTE2LTE2Ljg1OWwtMy40NjEgMy42M2MtLjI0LjI0LS40MTMuNTItLjUyMi44MmEyLjI1IDIuMjUgMCAwIDAtLjE0NS43OTV2MTAuNzFhLjIyNS4yMjUgMCAwIDEtLjM4My4xNThsLTIuNjU2LTIuNjY0YTEuMTI2IDEuMTI2IDAgMCAxLS4zMjgtLjc5NXYtOC41MzRjMC0yLjQ4NSAyLjAxLTQuNSA0LjQ5LTQuNWgyLjg0M2EuMjI1LjIyNSAwIDAgMSAuMTYyLjM4em0zMy4xMDUgNC4zNzloLjg2OGMuNTkzIDAgMS4wNzQuNDggMS4wNzQgMS4wNzR2MS4wMTZjMCAuMDMyLjAyNi4wNTcuMDU3LjA1Ny40OTUtLjg3NSAxLjE2LTEuNTEgMS45OTgtMS45MDlhNi4yMzYgNi4yMzYgMCAwIDEgMi43MS0uNTk2YzEuMDQ3IDAgMS45ODkuMTk0IDIuODI2LjU4Mi44MzcuMzg3IDEuNTUuOTIgMi4xNCAxLjU5NWE2Ljg5NiA2Ljg5NiAwIDAgMSAxLjM0IDIuMzg2Yy4zMDUuOTE1LjQ1NyAxLjkuNDU3IDIuOTUzYTguNzk1IDguNzk1IDAgMCAxLS40ODUgMi45NTMgNy40MTggNy40MTggMCAwIDEtMS4zNTUgMi4zODYgNi4yNjkgNi4yNjkgMCAwIDEtMi4wOTcgMS41OTUgNi4xODIgNi4xODIgMCAwIDEtMi42ODMuNTgyYy0uNjQ3IDAtMS4yMTctLjA3LTEuNzEyLS4yMDlhNS43NTEgNS43NTEgMCAwIDEtMS4zMTItLjUzNyA1LjI1MiA1LjI1MiAwIDAgMS0uOTctLjcgNS4wMTIgNS4wMTIgMCAwIDEtLjY1Ny0uNzMxLjA4Ni4wODYgMCAwIDAtLjA4Ni4wODV2Ny4yMjRhMS4zMSAxLjMxIDAgMCAxLTEuMzEgMS4zMWgtLjgwM2ExLjMxIDEuMzEgMCAwIDEtMS4zMS0xLjMxVjExLjY5NGMwLS43MjMuNTg2LTEuMzEgMS4zMS0xLjMxem0xMC4wNDYgNy4xNThjMC0uNTU3LS4wOS0xLjA5NC0uMjctMS42MWE0LjA3OCA0LjA3OCAwIDAgMC0uOC0xLjM3MyAzLjk5IDMuOTkgMCAwIDAtMS4yNy0uOTU0Yy0uNDk0LS4yMzktMS4wNTUtLjM1OC0xLjY4My0uMzU4LS42MjggMC0xLjE5LjEyLTEuNjg0LjM1OGEzLjk5IDMuOTkgMCAwIDAtMS4yNy45NTQgNC4wNzggNC4wNzggMCAwIDAtLjc5OSAxLjM3MiA0Ljg0NSA0Ljg0NSAwIDAgMC0uMjcgMS42MWMwIC41NTguMDkgMS4wOTQuMjcgMS42MTEuMTgxLjUxNy40NDcuOTc1LjggMS4zNzJhMy45OSAzLjk5IDAgMCAwIDEuMjcuOTU1Yy40OTQuMjM4IDEuMDU1LjM1OCAxLjY4My4zNTguNjI4IDAgMS4xODktLjEyIDEuNjgzLS4zNThhMy45OSAzLjk5IDAgMCAwIDEuMjctLjk1NWMuMzUyLS4zOTcuNjE4LS44NTUuOC0xLjM3Mi4xOC0uNTE3LjI3LTEuMDUzLjI3LTEuNjF6bTguMzU5LTcuMTU4aC45OGMuNjI2IDAgMS4xMzQuNTA3IDEuMTM0IDEuMTMzdjEuMDc3YzAgLjAzMS4wMjUuMDU3LjA1Ny4wNTcuMzgtLjgzNi45MjItMS40ODIgMS42MjYtMS45MzkuNzA0LS40NTcgMS41MTMtLjY4NiAyLjQyNi0uNjg2LjIwOSAwIC40MTQuMDIuNjEzLjA2YS43NjIuNzYyIDAgMCAxIC42MTQuNzQ3djEuOTY0YS43MTUuNzE1IDAgMCAxLS44NDIuNzA0IDQuNTggNC41OCAwIDAgMC0uODEzLS4wNzVjLS44IDAtMS40NDEuMTU0LTEuOTI2LjQ2Mi0uNDg1LjMwOS0uODU2LjY2MS0xLjExMyAxLjA2YTMuNiAzLjYgMCAwIDAtLjUxNCAxLjE5MmMtLjA4Ni4zOTgtLjEyOC42OTYtLjEyOC44OTV2Ni4zNTVhMS4zMSAxLjMxIDAgMCAxLTEuMzEgMS4zMWgtLjgwNGExLjMxIDEuMzEgMCAwIDEtMS4zMS0xLjMxVjExLjY5NGMwLS43MjMuNTg2LTEuMzEgMS4zMS0xLjMxem0xMS41ODUgMGguODA0Yy43MjMgMCAxLjMxLjU4NyAxLjMxIDEuMzFWMjMuMzlhMS4zMSAxLjMxIDAgMCAxLTEuMzEgMS4zMWgtLjgwNGExLjMxIDEuMzEgMCAwIDEtMS4zMS0xLjMxVjExLjY5NGMwLS43MjMuNTg2LTEuMzEgMS4zMS0xLjMxem0tMS43OTUtNC44NjJjMC0uNTc2LjIwNC0xLjA3OC42MTMtMS41MDYuNDEtLjQyNy45MjgtLjY0MSAxLjU1NS0uNjQxLjYyOCAwIDEuMTU2LjIwNCAxLjU4NC42MTEuNDI4LjQwOC42NDIuOTIuNjQyIDEuNTM2IDAgLjYxNy0uMjE0IDEuMTI5LS42NDIgMS41MzYtLjQyOC40MDgtLjk1Ni42MTItMS41ODQuNjEyLS42MjcgMC0xLjE0Ni0uMjE0LTEuNTU1LS42NDFhMi4xMDggMi4xMDggMCAwIDEtLjYxMy0xLjUwN3ptMTQuNzUzIDguMTMzYy0uNjk1LS41MS0xLjMxNC0uNzY2LTEuODU1LS43NjYtLjQ1NyAwLS45MDQuMTItMS4zNDIuMzU4LS40MzcuMjM5LS42NTYuNjI2LS42NTYgMS4xNjMgMCAuNDM4LjE4Ljc1Ni41NDIuOTU1LjM2Mi4xOTguODE4LjM2OCAxLjM3LjUwNy41NTIuMTM5IDEuMTQ2LjI4MyAxLjc4My40MzIuNjM4LjE1IDEuMjMyLjM3OCAxLjc4NC42ODYuNTUyLjMwOCAxLjAwOC43MyAxLjM3IDEuMjY4LjM2MS41MzcuNTQyIDEuMjcyLjU0MiAyLjIwNyAwIC44NTUtLjE3NiAxLjU3NS0uNTI4IDIuMTYyYTQuMjQxIDQuMjQxIDAgMCAxLTEuMzcgMS40MTcgNS45MjcgNS45MjcgMCAwIDEtMS44OTcuNzc1IDkuNTUzIDkuNTUzIDAgMCAxLTIuMTEyLjIzOWMtMS4wNjUgMC0yLjA0NS0uMTYtMi45NC0uNDc3LS4zNS0uMTI1LS43Ny0uMzc1LTEuMjYtLjc1MWExLjMxIDEuMzEgMCAwIDEtLjExOS0xLjk3NmwuMzU1LS4zNDhhMS4zMSAxLjMxIDAgMCAxIDEuNzgzLS4wNDhjLjIwOC4xODMuMzg4LjMyNC41NC40MjMuNTA0LjMyOSAxLjExOC40OTMgMS44NC40OTMuMjQ4IDAgLjUwNS0uMDMuNzcxLS4wOS4yNjctLjA2LjUxNC0uMTU5Ljc0Mi0uMjk4LjIyOC0uMTQuNDE0LS4zMTMuNTU3LS41MjIuMTQyLS4yMDkuMjE0LS40NTIuMjE0LS43MyAwLS40OTgtLjE4MS0uODY2LS41NDMtMS4xMDQtLjM2MS0uMjM5LS44MTgtLjQzMy0xLjM3LS41ODJhMjguNzQ2IDI4Ljc0NiAwIDAgMC0xLjc4My0uNDE3IDYuNzA3IDYuNzA3IDAgMCAxLTEuNzgzLS42MjcgMy43OTUgMy43OTUgMCAwIDEtMS4zNy0xLjIwOGMtLjM2MS0uNTE3LS41NDItMS4yMzMtLjU0Mi0yLjE0NyAwLS43OTUuMTU3LTEuNDg2LjQ3LTIuMDczYTQuMjY1IDQuMjY1IDAgMCAxIDEuMjQyLTEuNDQ2IDUuMjU2IDUuMjU2IDAgMCAxIDEuNzctLjgzNiA3Ljc3MyA3Ljc3MyAwIDAgMSAyLjAyNS0uMjY4Yy45MTMgMCAxLjgxNy4xNjQgMi43MTEuNDkyLjMyNC4xMTkuNjg1LjMzOSAxLjA4NC42NmExLjMxIDEuMzEgMCAwIDEgLjA3NSAxLjk3NWwtLjQyNi40MDFhMS4zMSAxLjMxIDAgMCAxLTEuNjc0LjEwMXptNy43ODctMy4yNzFoLjYzM2MuNzIzIDAgMS4zMS41ODcgMS4zMSAxLjMxdi45MjdhNS42MDIgNS42MDIgMCAwIDEgMS41MjctMS44MDVjLjY3NS0uNTI3IDEuNTgzLS43OSAyLjcyNS0uNzkgMi4xNSAwIDMuNTc2Ljg4NSA0LjI4IDIuNjU0LjQ5NS0uOTE0IDEuMTEzLTEuNTg1IDEuODU1LTIuMDEzLjc0Mi0uNDI3IDEuNjI2LS42NDEgMi42NTQtLjY0MS45MTMgMCAxLjY4My4xNTkgMi4zMTEuNDc3YTQuMDg0IDQuMDg0IDAgMCAxIDEuNTI3IDEuMzEyYy4zOS41NTcuNjcgMS4yMDguODQxIDEuOTU0LjE3Mi43NDYuMjU3IDEuNTQ2LjI1NyAyLjR2Ny4yMmExLjMxIDEuMzEgMCAwIDEtMS4zMSAxLjMxaC0uODA0YTEuMzEgMS4zMSAwIDAgMS0xLjMxLTEuMzF2LTYuODAyYzAtLjQzNy0uMDM4LS44Ni0uMTE0LTEuMjY3YTMuMTExIDMuMTExIDAgMCAwLS40LTEuMDc0IDIuMDYyIDIuMDYyIDAgMCAwLS43Ny0uNzNjLS4zMjQtLjE4LS43NDItLjI2OS0xLjI1Ni0uMjY5LS41MzIgMC0uOTg0LjEwNC0xLjM1NS4zMTNhMi42ODYgMi42ODYgMCAwIDAtLjkxMy44MzUgMy41MDggMy41MDggMCAwIDAtLjUxNCAxLjE5MyA1Ljk0IDUuOTQgMCAwIDAtLjE1NyAxLjM1N3Y2LjQ0NWExLjMxIDEuMzEgMCAwIDEtMS4zMSAxLjMxaC0uODA0YTEuMzEgMS4zMSAwIDAgMS0xLjMxLTEuMzF2LTcuMjJjMC0uODk1LS4xOC0xLjYwNi0uNTQyLTIuMTMzLS4zNjItLjUyNi0uOTYtLjc5LTEuNzk4LS43OS0uNTcgMC0xLjA1MS4xLTEuNDQxLjI5OC0uMzkuMi0uNzEzLjQ2OC0uOTcuODA2YTMuMjYgMy4yNiAwIDAgMC0uNTU3IDEuMTYzIDUuNDEzIDUuNDEzIDAgMCAwLS4xNyAxLjM3MnY2LjUwNGExLjMxIDEuMzEgMCAwIDEtMS4zMTEgMS4zMWgtLjgwNGExLjMxIDEuMzEgMCAwIDEtMS4zMS0xLjMxVjExLjY5NGMwLS43MjMuNTg3LTEuMzEgMS4zMS0xLjMxem0yNS40NTQgMGguODAzYy43MjQgMCAxLjMxLjU4NyAxLjMxIDEuMzFWMjMuMzlhMS4zMSAxLjMxIDAgMCAxLTEuMzEgMS4zMWgtLjgwM2ExLjMxIDEuMzEgMCAwIDEtMS4zMS0xLjMxVjExLjY5NGMwLS43MjMuNTg2LTEuMzEgMS4zMS0xLjMxem0tMS43OTYtNC44NjJjMC0uNTc2LjIwNS0xLjA3OC42MTQtMS41MDYuNDA5LS40MjcuOTI3LS42NDEgMS41NTUtLjY0MS42MjggMCAxLjE1Ni4yMDQgMS41ODQuNjExLjQyOC40MDguNjQyLjkyLjY0MiAxLjUzNiAwIC42MTctLjIxNCAxLjEyOS0uNjQyIDEuNTM2LS40MjguNDA4LS45NTYuNjEyLTEuNTg0LjYxMi0uNjI4IDAtMS4xNDYtLjIxNC0xLjU1NS0uNjQxYTIuMTA4IDIuMTA4IDAgMCAxLS42MTQtMS41MDd6bTE2Ljc1MSA4LjM3M2EzLjU2NCAzLjU2NCAwIDAgMC0uMzcxLS4yNiAyLjYwNyAyLjYwNyAwIDAgMC0xLjM0Mi0uMzg4Yy0uNjI3IDAtMS4xODkuMTItMS42ODMuMzU4YTMuOTkgMy45OSAwIDAgMC0xLjI3Ljk1NCA0LjA3OCA0LjA3OCAwIDAgMC0uNzk5IDEuMzcyIDQuODQ1IDQuODQ1IDAgMCAwLS4yNzEgMS42MWMwIC41NTguMDkgMS4wOTQuMjcxIDEuNjExLjE4LjUxNy40NDcuOTc1LjggMS4zNzJhMy45OSAzLjk5IDAgMCAwIDEuMjY5Ljk1NWMuNDk0LjIzOCAxLjA1Ni4zNTggMS42ODMuMzU4LjUzMyAwIDEuMDI4LS4xMTUgMS40ODQtLjM0My4wOTMtLjA0Ny4xOTMtLjExLjMtLjE4OWExLjMxIDEuMzEgMCAwIDEgMS43NTYuMTg1bC41Mi41ODRhMS4yNDggMS4yNDggMCAwIDEtLjMwNyAxLjkxIDcuOTggNy45OCAwIDAgMS0yLjY2OC45N2MtLjQxOS4wNjktLjc4LjEwNC0xLjA4NS4xMDRhNy45MDQgNy45MDQgMCAwIDEtMi45MS0uNTM3QTYuOTM4IDYuOTM4IDAgMCAxIDEzMC4zNjUgMjNhNy4yMyA3LjIzIDAgMCAxLTEuNTgzLTIuMzcxYy0uMzktLjkyNS0uNTg1LTEuOTU0LS41ODUtMy4wODcgMC0xLjEzMy4xOTUtMi4xNjIuNTg1LTMuMDg3YTcuMjMgNy4yMyAwIDAgMSAxLjU4My0yLjM3MSA2LjkzOCA2LjkzOCAwIDAgMSAyLjM2OS0xLjUyMSA3LjkwNCA3LjkwNCAwIDAgMSAyLjkxLS41MzdjLjg3NiAwIDEuNzU1LjE3NCAyLjY0LjUyMi4zMzcuMTMzLjczNS4zNyAxLjE5My43MTFhMS4zMSAxLjMxIDAgMCAxIC4xNjQgMS45NTdsLS41My41NTNhMS4zMSAxLjMxIDAgMCAxLTEuNzU0LjEyNnoiLz4KPC9zdmc+"
-				alt="Prismic"
-			/>
-			<figcaption>Loading preview...</figcaption>
+				alt="Prismic">
+			<figcaption>
+				Loading preview...
+			</figcaption>
 		</figure>
 	</section>
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
-
 useHead({
 	title: 'Prismic Preview - Loading'
 })
 
-// TODO: refactor into simple hook
-const { client, options: { linkResolver } } = usePrismic()
-const { push } = useRouter()
-onMounted(async () => {
-	const redirectURL = await client.resolvePreviewURL({
-		linkResolver,
-		defaultURL: '/'
-	})
-
-	push(redirectURL ?? '/')
-})
+usePrismicPreview()
 </script>
 
 <style scoped>

src/runtime/usePrismicPreview.ts

@@ -0,0 +1,19 @@
+import { onMounted } from 'vue'
+
+/**
+ * Resolves Prismic previews on the preview entry page (`/preview`)
+ *
+ * @param defaultURL - The default URL to redirect to if the previewed document doesn't map to one.
+ */
+export const usePrismicPreview = (defaultURL = '/'): void => {
+	const { client, options: { linkResolver } } = usePrismic()
+	const { push } = useRouter()
+	onMounted(async () => {
+		const redirectURL = await client.resolvePreviewURL({
+			linkResolver,
+			defaultURL
+		})
+
+		push(redirectURL)
+	})
+}