tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

docs: live preview config path

Browse Source
This commit is contained in:
Jacob Fletcher
2023-10-08 19:39:22 -04:00
parent 791f2051f3
commit f39ba60b08
1 changed files with 14 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/live-preview/overview.mdx
View File

@@ -14,7 +14,7 @@ Live Preview works by rendering an iframe on the page that loads your front-end
## Setup ## Setup
Setting up Live Preview is easy. You first need to enable it through the `admin.components.livePreview` property of your Payload config. It takes the following options: Setting up Live Preview is easy. You first need to enable it through the `admin.livePreview` property of your Payload config. It takes the following options:
| Path | Description | | Path | Description |
| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -31,12 +31,10 @@ Here is a basic example of enabling Live Preview on a `pages` collection:
// payload.config.ts // payload.config.ts
{ {
admin: { admin: {
components: {
livePreview: { livePreview: {
url: 'http://localhost:3000', // The URL to your front-end, this can also be a function (see below) url: 'http://localhost:3000', // The URL to your front-end, this can also be a function (see below)
collections: ['pages'], // The collections to enable Live Preview on (globals are also possible) collections: ['pages'], // The collections to enable Live Preview on (globals are also possible)
}, },
},
} }
} }
``` ```
@@ -44,7 +42,7 @@ Here is a basic example of enabling Live Preview on a `pages` collection:
Once configured, a new "Live Preview" tab will appear at the top of enabled documents. Navigating to this tab opens the preview window and loads your front-end application. Once configured, a new "Live Preview" tab will appear at the top of enabled documents. Navigating to this tab opens the preview window and loads your front-end application.
<Banner type="info"> <Banner type="info">
You can also define the <code>admin.components.livePreview</code> property on individual collection and global configs. Settings defined here will be merged into the top-level (if defined) as overrides. You can also define the <code>admin.livePreview</code> property on individual collection and global configs. Settings defined here will be merged into the top-level (if defined) as overrides.
</Banner> </Banner>
### URL ### URL
@@ -65,7 +63,6 @@ Here is an example of using a function that returns a dynamic URL:
// payload.config.ts // payload.config.ts
{ {
admin: { admin: {
components: {
livePreview: { livePreview: {
url: ({ url: ({
data, data,
@@ -76,7 +73,6 @@ Here is an example of using a function that returns a dynamic URL:
`}?locale=${locale}`, // Localization query param `}?locale=${locale}`, // Localization query param
collections: ['pages'], collections: ['pages'],
}, },
},
} }
} }
``` ```