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

# Visual Preview in Nuxt

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

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

> [!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
```

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

nuxt.config.ts

```javascript
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,
  },
  vite: {
    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

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

app/storyblok/Feature.vue

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

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

> [!WARNING]
> For Storyblok Bridge to work with Nuxt v4 and its new Nitro server, set the `deep` option to `true` to on the options object of `useAsyncStoryblok`.
> 
> See related [GitHub issue](https://github.com/storyblok/monoblok/issues/210#issuecomment-3227884450).

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

> [!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/nuxt Package Reference](https://www.storyblok.com/docs/libraries/js/nuxt-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 Nuxt with Storyblok](/docs/guides/nuxt)
-   [Next: Dynamic Routing in Nuxt](/docs/guides/nuxt/dynamic-routing)