Visual Preview in Vue

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

Connect your local environment

Go to 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 @vitejs/vite-plugin-mkcert package.

npm install @vitejs/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, go to the Config section and write / into 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>
  <p class="feature" v-editable="blok">
  <p class="feature">
    <span>{{ blok.name }}</p>
  </p>
</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.

Related links

• Storyblok Vue package reference
• Vite server options documentation
• vite-plugin-mkcert package