Usage
Methods
enter
Enter preview mode via API:
this.$previewMode.enter()
exit
Exit preview mode via API:
this.$previewMode.exit()
Entering by URL
Enter preview mode via url query parameters:
https://mydomain.com?preview=true&previewSecret=mysecret
Use your previewSecret set in options.
Exit preview mode using <PreviewModeExitButton>
<template>
<preview-mode-exit-button>
Exit preview mode
</preview-mode-exit-button>
</template>
<script>
import PreviewModeExitButton from '@voorhoede/nuxt-preview-mode-module/lib/components/PreviewModeExitButton.vue';
export default {
components: { PreviewModeExitButton },
};
</script>
<PreviewModeBar>
The module comes with a component shown when preview mode is enabled:
<template>
<preview-mode-bar />
</template>
<script>
import PreviewModeBar from '@voorhoede/nuxt-preview-mode-module/lib/components/PreviewModeBar.vue';
export default {
components: { PreviewModeBar },
};
</script>
It's contents can be overwritten:
<template>
<preview-mode-bar>
<p>Preview mode is enabled</p>
<preview-mode-exit-button>Disable</preview-mode-exit-button>
</preview-mode-bar>
</template>
<script>
import PreviewModeBar from '@voorhoede/nuxt-preview-mode-module/lib/components/PreviewModeBar.vue';
import PreviewModeExitButton from '@voorhoede/nuxt-preview-mode-module/lib/components/PreviewModeExitButton.vue';
export default {
components: { PreviewModeBar, PreviewModeExitButton },
};
</script>