How to Enable Storyblok Visual Editor in Production?

#nuxt #vue #typescript #storyblokchallenge

Storyblok is a headless CMS that gives developers flexibility and editors a visual interface to manage content. One of its most powerful features is the Visual Editor, which allows content editors to see real-time changes directly on the website.

In this article, we’ll cover what the Visual Editor is and why it matters, how to enable it in production in Nuxt 4 using @storyblok/nuxt, and share best practices for small vs large projects.

Enjoy!

🤔 What Is the Storyblok Visual Editor?

The Storyblok Visual Editor is a visual content editing interface that lets editors see their content changes in real time on your site. Unlike editing raw content in the CMS, the Visual Editor shows how content will appear within your actual page layout, providing a more intuitive and faster editing workflow.

In production, this feature is especially valuable for marketing teams or content editors who need to tweak content without developer intervention.

🟢 How to Enable the Visual Editor in Production (Nuxt 4)

With Nuxt 4 and the @storyblok/nuxt module, you can detect if the page is open in the Storyblok Visual Editor by checking for the query parameter _storyblok_tk[space_id]. Then you can fetch draft content and initialize the bridge safely.

First, we need to install and configure the module** in nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@storyblok/nuxt'
  ],
  storyblok: {
    accessToken: process.env.STORYBLOK_PREVIEW_TOKEN,
  }
})

Next, we fetch draft content and initialize the bridge in our page:

<script setup lang="ts">
const router = useRouter();

// Detect Visual Editor via the Storyblok query parameter
const isVisualEditor = router.currentRoute.value.query?._storyblok_tk[space_id] === process.env.NUXT_PUBLIC_STORYBLOK_SPACE_ID ;

// Fetch story content with the correct version
const { story } = await useAsyncStoryblok('your-slug', {
  version: isVisualEditor ? 'draft' : 'published'
});

onMounted(() => {
  if (isVisualEditor) {
    useStoryblokBridge(story.value);
  }
});
</script>

<template>
  <div v-if="story">
    <component :is="story.content.component" v-bind="story.content" />
  </div>
</template>

⚠️ Recommendation: This approach works well for smaller projects or MVPs. For larger production projects, it is advised to use a separate staging/test environment for visual editing to avoid exposing draft content to regular users.

✅ Best Practices

Always use the preview token for Visual Editor functionality.
Detect the Visual Editor via the query parameter _storyblok_tk[space_id].
Use version: 'draft' in useAsyncStoryblok when the editor is active.
For larger projects, consider staging/test environments to protect production content.

📖 Learn more

For more details about Storyblok, visual editing, and preview environments, check out VueSchool courses on Vue, Nuxt, and headless CMS integration by clicking this link or the image below:

This will help you build modern Vue or Nuxt apps with CMS integrations efficiently.

🧪 Advance skills

A certification can enhance your skills, boost credibility, and open doors to new opportunities. Whether you’re looking to advance your career or explore new paths, it’s a smart step toward success.

Check out Certificates.dev by clicking this link or the image below: