Visual Preview in Nuxt

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

Set the default environment

Go to 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.

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

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, go to the Config section and write / into 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

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

<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

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.

@storyblok/nuxt Package Reference

Concept: Visual Editor

Vite server options

vite-plugin-mkcert

Get in touch with the Storyblok community