Statamic Live Preview for Nuxt
This package allows you to use a Nuxt website as Live Preview in Statamic.
Installation
Add package to your nuxt app
yarn add @teamnovu/statamic-live-preview-nuxt
If you are migrating from the previous statamic live preview provided by our fork, please also remove the old statamic live preview module:
yarn remove statamic-live-preview-nuxt
Add plugin to your nuxt config
Create a file called 'live-preview.js' in the plugins folder.
Add the following lines to `plugins/live-preview.js':
import livePreview from '@teamnovu/statamic-live-preview-nuxt'
export default livePreview
Add the plugin to your nuxt.config.js file.
plugins: [
// ...
'~/plugins/live-preview.js'
]
Statamic 3.4.8 or higher
To use the live preview without refreshing the page after every change, disable "Refresh" on the preview targets of your collection.
window.postMessage()
Statamic 3.3 Fork using If you are using our Statamic 3.3 fork you can set the CMS to update the live preview without having it refresh the page after every change.
To do so set the config post_message_data
in config/statamic/live_preview.php
to live-preview-update
.
This will tell the CMS to use window.postMessage()
to notify this plugin to refresh the page.
ScrollTo Element Behavior (Optional)
For better user experience you can enable scroll to element when the user focuses an input element. However not all editable fields are supported. Register the Vue Directive to enable ScrollTo Element behavior.
import Vue from 'vue'
import livePreview, { Directive } from '@teamnovu/statamic-live-preview-nuxt'
Vue.use(Directive)
export default livePreview
Use it like this:
<h2 v-editor-target="'title'">This is a headline</h2>
Nested Example:
<!-- pages/_.vue -->
<ComponentsLoader
:components="page.replicator_product_components"
v-editor-target="'replicator_product_components'"
/>
All values used with v-editor-target
must match the corresponding field handle
of the CMS.
Then within your ComponentsLoader.vue:
<!-- components/ComponentsLoader.vue -->
<Component
...
v-editor-target="index"
/>
If you nest v-editor-target
their values will be concatenated. For Example: replicator_product_components.0.title
.
Transpilation
Depending on your Node-version you may need to add the package to be transpiled by nuxt.
build: {
transpile: [
// ...
'@teamnovu/statamic-live-preview-nuxt'
]
}