Visual Data Previews with Vue

Vue re-renders a component when its reactive data changes, so a Visual Data Preview in Vue comes down to assigning CloudCannon's latest data to a reactive value. The CloudCannon Visual Editor Connector wraps the sequence described in our documentation on using Visual Data Previews with vanilla JavaScript: it listens for CloudCannon's events, calls enableEvents(), reads the latest data with value(), and hands it to a callback you supply.

The examples below use the Vue Composition API and <script setup>, which needs Vue 3.2 or later. The connector itself does not depend on your Vue version: it hands your callback the latest data, and where you assign what it receives is up to your component.

What your Site needs#

• The component you want to preview has to render on a page CloudCannon can open. The Visual Editor opens files, not components, and in a Nuxt project, files in the pages/ directory are a good example of files that output to their own pages.
• The component must read its data from a data or content file in your project, rather than holding it internally.
• Collection configuration decides whether a file has a URL the Visual Editor can open. For what to check, please read our documentation on what Visual Data Previews are.
• The connector runs on the client and needs tearing down when your component goes away, which Vue's onMounted and onBeforeUnmount hooks handle.

Installation#

This package targets the deprecated v0 Visual Editor API. For a new Site, please read our documentation on initializing the Visual Editor API.

npm i @cloudcannon/visual-editor-connector

Connecting a component#

Call onCloudCannonChanges() when your component mounts, passing a callback. The connector runs that callback on load and after every change, handing it the file's structured data, and you assign what it receives to a reactive value. The code below goes inside your component's <script setup> block.

import { onMounted, onBeforeUnmount, ref } from 'vue';
import { onCloudCannonChanges, stopCloudCannonChanges } from '@cloudcannon/visual-editor-connector';

const { page } = useContent(); 

const pageData = ref(page.value); 

onMounted(() => {
  onCloudCannonChanges((latestValue) => {
    pageData.value = latestValue; 
  });
});

onBeforeUnmount(() => {
  stopCloudCannonChanges(); 
});

You do not need to call enableEvents() yourself. onCloudCannonChanges() does it, and also covers the case where CloudCannon has already loaded by the time your component mounts.

To cover that case, onCloudCannonChanges() reads window.CloudCannon. If other code on your page calls useVersion('v1'), CloudCannon reassigns that global to the v1 object, which has no enableEvents(), so the connector fails to start and your preview never updates. Pass true as the second argument, useVersion('v1', true), to get the v1 object without reassigning the global. For more information, please read our documentation on initializing the Visual Editor API.

Tearing down listeners#

stopCloudCannonChanges() removes every update listener registered through the package, not only the one belonging to the component that calls it. If two components each call onCloudCannonChanges(), the first to unmount stops updates for both.

Call onCloudCannonChanges() in one component per page, or accept that unmounting any one of them ends previews for the rest until the page reloads.

Getting help#

If the connector does not behave as described, contact support with your Site name, the Vue or Nuxt version your project uses, and what you expected to happen. You can also raise an issue on the GitHub repository.

For a worked example, see the Nuxt variant of our Sendit template.