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

32
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,11 +31,9 @@ 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,17 +63,15 @@ 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, documentInfo,
documentInfo, locale
locale }) => `${data.tenant.url}${ // Multi-tenant top-level domain
}) => `${data.tenant.url}${ // Multi-tenant top-level domain documentInfo.slug === 'posts' ? `/posts/${data.slug}` : `/${data.slug}
documentInfo.slug === 'posts' ? `/posts/${data.slug}` : `/${data.slug} `}?locale=${locale}`, // Localization query param
`}?locale=${locale}`, // Localization query param collections: ['pages'],
collections: ['pages'],
},
}, },
} }
} }