Create a Preview Environment for Your Nuxt 3 Website

This tutorial will explore deploying our Nuxt website on Netlify using two different approaches. First, as a static site, taking full advantage of the Jamstack approach and Nuxt 3, seeing how to generate a preview for our web by creating a Nuxt plugin to refresh the content, enabling live editing on our statically deployed environment. Then, we will see a different approach with a separate deployment for our preview and production environments to make it more optimized and efficient (recommended).

Section titled Requirements Requirements

This is the last part of the Ultimate Tutorial Guide for Nuxt. The previous part shows how to add and manage multiple languages in Storyblok and Nuxt. Check out the previews parts!

Section titled 1st Approach: Full Static with Preview Mode 1st Approach: Full Static with Preview Mode

Nuxt 3 has the possibility to deploy a pre-rendered application using Static Site Generation (SSG) with ssr: true. By running the command nuxi generate Nitro will pre-render the routes of our application at build time. Check Static Hosting in the official Nuxt 3 docs for more details.

Let’s prepare our project to use this rendering method while being able to preview changes in our Headless CMS.

Section titled Adding Preview Mode Adding Preview Mode

In Nuxt 3, to refresh the static content on a page when we are editing inside the Storyblok Visual Editor, or showcasing the draft content to an external reviewer, we shall set up a plugin. This preview plugin will allow retrieving the draft content while keeping the published version at build time, bypassing the Static Site Generation.

Inside the plugins folder, add a preview.js file with the following code:

        
      export default defineNuxtPlugin((nuxtApp) => {
  const route = useRoute();
  const preview = route.query?._storyblok || false;

  if (preview) {
    nuxtApp.hook('page:finish', () => { refreshNuxtData() });
  }

  return { provide: { preview } };
});
    

This plugin checks if the website is rendered inside Storyblok by reading the query parameter _storyblok (line 3). If it’s present and the page has finished loading, it will automatically re-fetch the data, even if it is static (line 5).

Having added the preview mode, let's now configure the content versions to work accordingly.

Section titled Loading the Draft Version only in Preview Mode Loading the Draft Version only in Preview Mode

Once we add the preview mode, we can use $preview, available inside useNuxtApp(), to fetch different versions of data: draft for the preview mode and published otherwise.

Replace the code inside [...slug].vue with the following:

        
      
<script setup>
const { $preview } = useNuxtApp()
const { slug } = useRoute().params
const url = slug && slug.length > 0 ? slug.join('/') : 'home'

// API options
const version = $preview ? 'draft' : 'published'
const { locale } = useI18n()
const resolveRelations = ['popular-articles.articles']

// Full Static with refresh approach
const { data: story, pending } = await useAsyncData(
  `${locale.value}-${url}`,
  async () => {
    const { data } = await useStoryblokApi().get(`cdn/stories/${url.replace(/\/$/, '')}`, {
      version,
      language: locale.value,
      resolve_relations: resolveRelations
    })
    return data?.story
  },
);

// Load the bridge in preview mode
onMounted(() => {
  if ($preview && story.value && story.value.id) {
    useStoryblokBridge(
      story.value.id,
      (evStory) => story.value = evStory,
      {
        resolveRelations,
      }
    );
  }
});
</script>

<template>
  <StoryblokComponent v-if="pending === false && story" :blok="story.content" />
</template>
    

Here, we are using the $preview parameter from useNuxtApp() to decide when to fetch the draft or the published content by providing the version parameter to the request (line 7 & 16). As you can see, we are only loading the bridge if $preview is enabled, to avoid extra code in production (line 26).

Now, let's deploy the website.

Section titled Deployment Deployment

We are going to use Netlify for our deployment. If you don't have an account, you can create a new one for free. But of course, feel free to choose any static-friendly provider that you like for the deployment.

Before deploying, let's set up our environment file as well. This is needed because the access token shouldn't be present in the code. For this, create a .env file in the root of your project, and add the access token: STORYBLOK_ACCESS_TOKEN=<YOUR_ACCESS_TOKEN>. Then, in your nuxt.config.js file, update the module with the following code:

        
      
modules: [
  '@storyblok/nuxt',
  // other modules
],
storyblok: {
   accessToken: process.env.STORYBLOK_ACCESS_TOKEN, // New .env variable
   use: [apiPlugin]
},
    

Now push the code to a git provider, like Github, and let’s deploy it.

After logging into Netlify, you should land on the dashboard {1} that shows an overview of all the projects you have. We need to create a new project, click on Add new site {2} button in the Sites section, and select Import an existing project {3}.

Then, follow the steps:

1. Connect to git provider: GitHub (or equivalent)
2. Select repository: nuxt-ultimate-tutorial (your frontend repo)
3. Configure site and deploy: After importing the repo, we will need to configure the commands and variables needed to pre-render our site. Add the npm run generate command {1} and dist as the publish directory {2}. Finally you will need to include the environment variable {3} by clicking the New variable button {4} and adding the respective key and value {5}.

Afterwards, click on deploy, and your website should be built and deployed soon. Once it is deployed, you will see a small screenshot, a random Netlify generated URL and a published green tag.

Congratulations, you just deployed your full-blown multilingual website made with Nuxt 3 and Storyblok. 

Section titled Adding a preview URL Adding a preview URL

Now, we can add the URL for our production environment to our Visual Editor. Inside the Visual Editor, click on Change URL {1} and on Add or change preview URLs {2}.

This will take us to the Visual Editor Settings {1}. Here, we will add a new preview URL to our just deployed environment: Nuxt 3 Prod {2}. The preview URL will be https://nuxt-ultimate-tutorial-ssg.netlify.app {3}, but feel free to add the production URL as default, once you’re ready {4}. Then hit the Save button {5}.

If we access the newly added preview URL inside the Visual Editor, we will be able to see the dotted lines. Moreover, draft content instead of published as in development. This setup will help the content editors do live edits, add new stories, and see the changes in real time without publishing the content to production when accessing the preview URL inside Storyblok.

The deployed URL can also be used as your production URL. When it is being accessed by a website visitor, the preview mode is not enabled, and they will only see the published content.

Although this is a possible solution, we always recommend having two separate environments for Preview and Production, so as not to overload your hosting provider's usage and have a clear separation of concerns. Let's see how this can be done.

Section titled 2nd Approach: Preview and Production separate environments (recommended) 2nd Approach: Preview and Production separate environments (recommended)

In an ideal world, it would be great to be able to use the same code but have two different deployments on our trusted hosting, one for previewing changes, and one for the end user.

Luckily, with frameworks like Nuxt, and its versatility to switch from one rendering mode to another, with a couple of environment variables we can control how we want to render the page and, therefore, be able to display draft or published content depending on those variables.

Section titled Setting up the Preview Mode Setting up the Preview Mode

In this type of approach we don’t need a client plugin to refresh our static site as we will directly serve a Client Side Rendering (CSR) application for the preview mode.

The only thing we have to do is to create a new environment variable called NUXT_PUBLIC_NODE_ENV and give it the value preview. This variable will be the one we will use to load the draft or published content and define what kind of rendering we want.

Section titled Adding the Rendering method conditional Adding the Rendering method conditional

To build our application as Single Page App (SPA) when the NUXT_PUBLIC_NODE_ENV doesn’t have the value production, add this line in nuxt.config.js:

        
      export default defineNuxtConfig({
  ssr: process.env.NUXT_PUBLIC_NODE_ENV === 'production' ? true : false,
  // Leave here other things like: css, modules, i18n, nitro
})
    

Section titled Loading the draft content in the Preview environment Loading the draft content in the Preview environment

Now, we need to tell the [...slug].vue page when to load draft or published data. We can do it by using the same environment variable, we just need to add it as part of the public runtimeConfig in nuxt.config.js:

        
      export default defineNuxtConfig({
  // Leave here other things like: ssr, css, modules, i18n, nitro
  runtimeConfig: {
    public: {
      NODE_ENV: process.env.NODE_ENV
    }
  },
})
    

Once we have it available, we can override the […slug].vue with the following code:

        
      <script setup>
const { slug } = useRoute().params
const url = slug && slug.length > 0 ? slug.join('/') : 'home'

const isPreview = useRuntimeConfig().public.NODE_ENV !== 'production'
const { locale } = useI18n()
const resolveRelations = ['popular-articles.articles']

const { data: story, pending } = await useAsyncData(
  `${locale.value}-${url}`,
  async () => {
    const { data } = await useStoryblokApi().get(`cdn/stories/${url.replace(/\/$/, '')}`, {
      version: isPreview ? 'draft' : 'published',
      language: locale.value,
      resolve_relations: resolveRelations
    })
    return data?.story
  },
)

if (!isPreview) {
  if (!story.value) {
    showError({ statusCode: 404, statusMessage: "Page Not Found" })
  }
}

onMounted(() => {
  if (isPreview && story.value && story.value.id) {
    useStoryblokBridge(
      story.value.id,
      (evStory) => story.value = evStory,
      {
        resolveRelations,
      }
    )
  }
})
</script>

<template>
  <StoryblokComponent v-if="pending === false && story" :blok="story.content" />
</template>
    

Surely you are thinking, it looks quite similar to the previous approach, and it is totally true, we add the same conditionals to load one type of content or another (line 13) and to load or not the bridge (line 28), the difference is that now we use the environment variable to determine which content version should be fetched (line 5).

Section titled Deploying the Preview and Production sites Deploying the Preview and Production sites

Now that we have modified our code to work in both environments, we only have to deploy the project in Netlify for both cases:

Preview environment

We will need the Preview Access Token and activate the preview mode.

        
      STORYBLOK_ACCESS_TOKEN='<PREVIEW_TOKEN>'
NUXT_PUBLIC_NODE_ENV='preview'
    

Prod environment

We will need the Public Access Token, which only have access to published content, and activate the production mode.

        
      STORYBLOK_ACCESS_TOKEN='<PUBLIC_TOKEN>'
NUXT_PUBLIC_NODE_ENV='production'
    

Both will use the npm run generate command {1} and the dist folder {2}:

Congratulations!! You have been able to deploy your production site and create an internal only environment to edit your pages and test them beforehand. Don't forget to add the Preview URL in the Settings of your Storyblok Space and you'll be ready for takeoff 🚀