Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-29 00:52:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: add more detail to usePreviewMode explanation (#26602)

Browse Source
This commit is contained in:
Adam Hudák 2024-04-19 09:43:22 -05:00 committed by GitHub
parent 9ba1ebe984
commit 6f3f1c6ee4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
docs/3.api/2.composables/use-preview-mode.md
View File

@ -5,6 +5,8 @@ description: "Use usePreviewMode to check and control preview mode in Nuxt"
# `usePreviewMode` # `usePreviewMode`
Preview mode allows you to see how your changes would be displayed on a live site without revealing them to users.
You can use the built-in `usePreviewMode` composable to access and control preview state in Nuxt. If the composable detects preview mode it will automatically force any updates necessary for [`useAsyncData`](/docs/api/composables/use-async-data) and [`useFetch`](/docs/api/composables/use-fetch) to rerender preview content. You can use the built-in `usePreviewMode` composable to access and control preview state in Nuxt. If the composable detects preview mode it will automatically force any updates necessary for [`useAsyncData`](/docs/api/composables/use-async-data) and [`useFetch`](/docs/api/composables/use-fetch) to rerender preview content.
```js ```js
@ -47,15 +49,11 @@ The `getState` function will append returned values to current state, so be care
## Example ## Example
The example below creates a page where part of a content is rendered only in preview mode.
```vue [pages/some-page.vue] ```vue [pages/some-page.vue]
<script setup> <script setup>
const route = useRoute() const { enabled, state } = usePreviewMode()
const { enabled, state } = usePreviewMode({
shouldEnable: () => {
return route.query.customPreview === 'true'
},
})
const { data } = await useFetch('/api/preview', { const { data } = await useFetch('/api/preview', {
query: { query: {
@ -67,12 +65,9 @@ const { data } = await useFetch('/api/preview', {
<template> <template>
<div> <div>
Some base content Some base content
<p v-if="enabled"> <p v-if="enabled">
Only preview content: {{ state.token }} Only preview content: {{ state.token }}
<br> <br>
<button @click="enabled = false"> <button @click="enabled = false">
disable preview mode disable preview mode
</button> </button>
@ -80,3 +75,20 @@ const { data } = await useFetch('/api/preview', {
</div> </div>
</template> </template>
``` ```
Now you can generate your site and serve it:
```bash [Terminal]
npx nuxi generate
npx nuxi preview
```
Then you can see your preview page by adding the query param `preview` to the end of the page you want to see once:
```js
?preview=true
```
::note
`usePreviewMode` should be tested locally with `nuxi generate` and then `nuxi preview` rather than `nuxi dev`. (The [preview command](/docs/api/commands/preview) is not related to preview mode.)
::