usePreviewMode composable signature
usePreviewMode is a composable that returns an object with `enabled` and `state` properties. The signature is: const { enabled, state } = usePreviewMode()
composables/use-preview-mode
10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
usePreviewMode purpose
Preview mode allows you to see how your changes would be displayed on a live site without revealing them to users. The usePreviewMode composable accesses and controls preview state in Nuxt. If preview mode is detected, it will automatically force any updates necessary for useAsyncData and useFetch to rerender preview content.
usePreviewMode shouldEnable option
The usePreviewMode composable accepts a shouldEnable option that is a function specifying a custom way to enable preview mode. By default, preview mode is enabled if there is a `preview` parameter in the URL that equals `true` (for example, http://localhost:3000?preview=true). Custom logic can override this default behavior.
usePreviewMode getState option
The usePreviewMode composable accepts a getState option that is a function receiving the currentState parameter. This function allows you to modify and extend the default state. The getState function will append returned values to the current state. By default, usePreviewMode stores the value of a `token` parameter from the URL in state.
usePreviewMode onEnable and onDisable callbacks
The usePreviewMode composable accepts onEnable and onDisable options, which are callback functions. By default, when preview mode is enabled, it calls refreshNuxtData() to re-fetch all data from the server. When disabled, it attaches a callback to call refreshNuxtData() after a subsequent router navigation. Custom callbacks can be specified to override this default behavior.
usePreviewMode enabled property is reactive
The `enabled` property returned by usePreviewMode is reactive and can be modified to control preview mode state, such as setting it to false to disable preview mode.
usePreviewMode custom composable wrapper example
Example of wrapping usePreviewMode into a custom composable to keep options consistent. The example creates a useMyPreviewMode function that uses useRoute and passes a shouldEnable function to usePreviewMode that checks for a customPreview query parameter: export function useMyPreviewMode () { const route = useRoute(); return usePreviewMode({ shouldEnable: () => { return !!route.query.customPreview } }) }
usePreviewMode example with custom state and fetch
Example showing how to use usePreviewMode in a Vue component. The example demonstrates accessing enabled and state properties, using state.token in a useFetch query, conditionally rendering content based on enabled status, and providing a button to disable preview mode: <script setup> const { enabled, state } = usePreviewMode(); const { data } = await useFetch('/api/preview', { query: { apiKey: state.token } }) </script> <template> <div> Some base content <p v-if="enabled"> Only preview content: {{ state.token }} <br> <button @click="enabled = false"> disable preview mode </button> </p> </div> </template>
usePreviewMode testing with generate and preview commands
usePreviewMode should be tested locally with `nuxt generate` followed by `nuxt preview` rather than `nuxt dev`. To see preview content, generate the site, run the preview server, then access the page with the query parameter `preview=true` appended to the URL (for example, http://localhost:3000/?preview=true).
usePreviewMode minimum version
usePreviewMode is available in Nuxt 3.11 and later.