---
title: Visual Preview in Vue
description: Learn how to connect your Vue project to Storyblok’s Visual Editor for a seamless, intuitive content editing experience.
url: https://storyblok.com/docs/guides/vue/visual-preview
---

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

> [!WARNING]
> The preview area requires an `https` secure connection. Learn more in the [Visual Editor concept](/docs/concepts/visual-editor).

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

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

Add the plugin to your Vite config file.

vite.config.js

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

src/components/Feature.vue

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

> [!NOTE]
> Learn more about the available [Bridge options](https://www.storyblok.com/docs/libraries/js/vue-sdk) for this package.

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

> [!NOTE]
> Learn more about preview and production environments in this [tutorial](https://www.storyblok.com/tp/create-preview-production-environments-and-deploy).

## Related resources

[@storyblok/vue Package Reference](https://www.storyblok.com/docs/libraries/js/vue-sdk)

[Concept: Visual Editor](/docs/concepts/visual-editor)

[Vite server options](https://vite.dev/config/server-options.html#server-https)

[vite-plugin-mkcert](https://www.npmjs.com/package/vite-plugin-mkcert)

  

## Pagination

-   [Previous: Integrate Vue with Storyblok](/docs/guides/vue)
-   [Next: Dynamic Routing in Vue](/docs/guides/vue/dynamic-routing)