Visual Preview in Vue

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

Connect your local environment

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

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

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

Add the plugin to your Vite config file.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueDevTools from 'vite-plugin-vue-devtools';
import mkcert from 'vite-plugin-mkcert'

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    mkcert(),
  ],
});

Restart your development server if necessary, your project should be visible in the preview area.

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

Set up Storyblok’s Bridge

Connect the Vue components in your project with their Storyblok counterparts by using the v-editable directive.

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

Repeat this for the rest of the components.

The useStoryblok used to fetch the home story already configured the Bridge for you.

Deploy the preview environment

We recommend setting up a second deploy environment and setting the version parameter to ‘draft’ in the Storyblok client and generating different tokens for each environment.

Use ‘published’ on your production deployment process.

@storyblok/vue Package Reference

Concept: Visual Editor

Vite server options

vite-plugin-mkcert

Get in touch with the Storyblok community