Component Previews

Component previews allow Vue components to be rendered in isolation in external contexts, such as the Drupal Canvas editor. This enables editors to see live previews of components directly in the page builder.

nuxt-component-preview implements this for Nuxt/Vue. It enables previewing components in external contexts and auto-generates a component index for Drupal Canvas integration.

If you are using the Nuxt Starter or nuxtjs-drupal-ce, the module is already pre-configured — no setup needed.

Component Index

The same module also auto-generates a component index that Canvas uses to discover the available components, their props, and their metadata.

Manual Setup

If you are not using the Nuxt Starter or nuxtjs-drupal-ce, install and configure the module manually.

Install the module:

npm install nuxt-component-preview

Add it to nuxt.config.ts and add <ComponentPreviewArea /> to app.vue:

export default defineNuxtConfig({
  modules: ['nuxt-component-preview'],
})

<template>
  <ComponentPreviewArea v-if="useRuntimeConfig().public.componentPreview" />
  <NuxtPage v-else />
</template>

When embedding previews from a different domain (e.g. a Drupal backend), disable the app manifest in development to avoid relative URL failures:

$development: {
  experimental: {
    appManifest: false
  }
}

For CORS configuration, see the nuxt-component-preview CORS setup. When using nuxtjs-drupal-ce, CORS is configured automatically.