Skip to content
Storyblok Documentation Docs

Visual Preview in Nuxt

Enhance your editorial and development experience by connecting your local project with Storyblok’s visual editor.

Set the default environment

Section titled “Set the default environment”

Open Settings → Visual Editor and set the default environment to the URL of the local development server. Nuxt’s default is localhost:3000, for example.

For Vite, install the vite-plugin-mkcert package.

Terminal window
npm install vite-plugin-mkcert --save-dev

Register the plugin in the Nuxt config file. Additionally, set the devServer https property to true.

nuxt.config.ts
import mkcert from "vite-plugin-mkcert";


export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    [
      "@storyblok/nuxt",
      {
        accessToken: process.env.STORYBLOK_DELIVERY_API_TOKEN,
        apiOptions: {
          region: "eu",
        },
      },
    ],
  ],
  devServer: {
    https: true,
  },
  plugins: [mkcert()],
});

Restart the dev server if necessary.

To render the home story correctly in the Visual Editor, select the Config section and type / in the Real path field.

You may have to open the URL in a separate browser tab and accept the certificate first.

Bridge with the Visual Editor

Section titled “Bridge with the Visual Editor”

Connect Nuxt components with their Storyblok counterparts via the storyblokEditable module.

src/components/Feature.vue
<script setup>
defineProps({ blok: Object })
</script>


<template>
  <div class="feature" v-editable="blok">
  <div class="feature">
    <span>{{ blok.name }}</span>
  </div>
</template>

Now, click on a component and see its corresponding block open up in the editor, or change a field value and see it rendered in real-time.

The useAsyncStoryblok used to fetch the home story also configures the Bridge.

Deploy the preview environment

Section titled “Deploy the preview environment”

Make sure to fetch the draft version of the content and use a preview access token. Deploy in client-side or server-side rendering mode to reflect content updates dynamically upon saving content.

For the production environment, fetch the published version of the content and use a public access token.

Section titled “Related resources”

Get in touch with the Storyblok community

DiscordGitHubYouTubeBlueSkyX.comLinkedIn