Install the Prepr preview toolbar

Enable the Prepr preview toolbar

The Prepr preview toolbar is already installed, so the next step is to enable it. To enable the preview toolbar in your Nuxt front end, follow the steps below.

1. Add the NUXT_PREPR_ENV variable to the .env file. You can enable the preview toolbar for a staging environment by setting the value to preview.

   Set this variable to production when you deploy your website to production so that the preview toolbar doesn’t get displayed in your live website and visitors can’t switch segments or A/B variants.

   ./.env

   NUXT_PREPR_GRAPHQL_URL=<YOUR-PREPR-GRAPHQL-URL>
   NUXT_PREPR_ENV=preview

2. Since we are setting up the configuration for the staging environment, update the value of the NUXT_PREPR_GRAPHQL_URL variable to the API URL of the GraphQL Preview access token. This access token allows content editors to preview unpublished content items.

   

3. The preview toolbar fetches all segments from the Prepr API. So, you need to give it access to do this by ticking the Enable edit mode checkbox in the access token. Click the Save button.

   Invisible unicode characters

   When using the preview access token, you’ll notice your query responses include additional unicode characters for the whitespace in the text fields. When you turn on edit mode in an access token, Stega-encoding serializes metadata into invisible UTF-8 encoded characters and appends them to string values.

   

4. Add the highlighted preprEnv value to the runtimeConfig in your nuxt.config.ts. It defaults to production, so the toolbar stays off unless you set NUXT_PREPR_ENV.

   ./nuxt.config.ts

   import tailwindcss from '@tailwindcss/vite'
    
   // https://nuxt.com/docs/api/configuration/nuxt-config
   export default defineNuxtConfig({
     compatibilityDate: '2025-07-15',
     devtools: { enabled: true },
     modules: ['@nuxt/fonts'],
     css: ['~/assets/css/main.css'],
     // @nuxt/fonts finds the Ubuntu font in main.css and self-hosts it.
     fonts: {
       defaults: { weights: [400, 700] },
     },
     vite: {
       plugins: [tailwindcss()],
     },
     runtimeConfig: {
       // Server-only: set with NUXT_PREPR_GRAPHQL_URL in .env or on your host.
       preprGraphqlUrl: '',
       // 'preview' shows the Prepr preview toolbar and lets it override segments
       // and A/B variants. Set with NUXT_PREPR_ENV.
       preprEnv: 'production',
     },
   })

5. So far, your web app is setting the headers based on the visitor cookies to determine how to render the A/B testing and adaptive content. To make sure the Prepr preview toolbar overrides the headers to switch between the A/B testing and adaptive content variants, update server/middleware/prepr.ts to enable the preview option in preview mode only.

   ./server/middleware/prepr.ts

   import { handlePreprRequest } from '@preprio/toolkit/nuxt'
    
   // Gives every visitor a Prepr customer ID cookie and prepares the Prepr
   // request headers (customer ID, segment, A/B variant) for the page fetch.
   export default defineEventHandler((event) => {
     // In preview, the toolbar can override the visitor's segment and A/B variant.
     handlePreprRequest(event, { preview: useRuntimeConfig(event).preprEnv === 'preview' })
   })

Add the preview toolbar component

Now that the preview access token is updated, you can render the preview toolbar in your website by adding the highlighted code to app/app.vue.

<script setup lang="ts">
import { extractAccessToken, getToolbarProps } from '@preprio/toolkit/nuxt'
import PreprToolbar from '@preprio/toolkit/nuxt/components/PreprToolbar'
import PreprTrackingPixel from '@preprio/toolkit/nuxt/components/PreprTrackingPixel'
 
useHead({
  htmlAttrs: { lang: 'en' },
  title: 'Prepr Nuxt complete starter',
  meta: [{ name: 'description', content: 'Showing the power of personalization and A/B testing' }],
})
 
// The GraphQL URL is server-only, so resolve these values on the server.
// useState sends them to the browser in the Nuxt payload.
const accessToken = useState<string>('prepr-access-token')
const toolbarProps = useState<Awaited<ReturnType<typeof getToolbarProps>> | null>('prepr-toolbar')
 
if (import.meta.server) {
  const { preprGraphqlUrl, preprEnv } = useRuntimeConfig()
  accessToken.value = extractAccessToken(preprGraphqlUrl)
  // getToolbarProps never throws: a failed segment fetch returns an empty list.
  toolbarProps.value = preprEnv === 'preview'
    ? await getToolbarProps(new Headers(useRequestHeaders()), preprGraphqlUrl)
    : null
}
</script>
 
<template>
  <NuxtRouteAnnouncer />
  <NavBar />
  <NuxtPage />
  <PreprTrackingPixel v-if="accessToken" :id="accessToken" />
  <PreprToolbar v-if="toolbarProps" v-bind="toolbarProps" />
</template>

The toolbar props are resolved on the server, like the access token, and only when NUXT_PREPR_ENV is set to preview. getToolbarProps never throws an error. If it can’t fetch the segments, the toolbar shows an empty segment list.

Test the preview toolbar

Now that the preview toolbar is being rendered, you can test it with the following steps:

1. Stop the localhost website server (CTRL-C) if it’s running and restart it with the npm run dev terminal command.

2. Go to the home page of your website, open the Prepr preview toolbar and click the Reset button.

3. Choose the Electric Car Lovers segment. You’ll see the personalized header for this segment.

4. Go to http://localhost:3000/electric-lease to open the Electric Lease Landing Page in the browser and choose the B variant. You’ll see that the text changes to the B variant content.