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

npm install @vitejs/vite-plugin-mkcert --save-dev

Add the plugin to your Nuxt config file.

import mkcert from 'vite-plugin-mkcert'

export default defineNuxtConfig({
	devtools: { enabled: true },
	modules: [
		['@storyblok/nuxt', {
		  {
		    accessToken: '<YOUR-ACCESS-TOKEN>',
		    apiOptions: {
		      region: 'eu',
		    }
		  }
		}],
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>
  <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.

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.