{"id":5505,"date":"2023-07-27T12:16:19","date_gmt":"2023-07-27T17:16:19","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=5505"},"modified":"2023-07-27T12:25:06","modified_gmt":"2023-07-27T17:25:06","slug":"headless-wordpress-post-previews-in-nuxt-3","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/headless-wordpress-post-previews-in-nuxt-3\/","title":{"rendered":"Headless WordPress Post Previews in Nuxt 3"},"content":{"rendered":"\n

In this short article, you’ll learn how to implement post and content previews in a Nuxt 3 application using the Faust.js WordPress plugin. All of the code for this article is located on the feature\/previews<\/code> branch of the Nuxt WordPress<\/a> starter I created for a more foundational tutorial on Nuxt 3 and headless WordPress<\/a>. If you’re new to Nuxt 3 and headless WordPress, I’d recommend starting with that tutorial.<\/p>\n\n\n\n

What is Faust.js and What Does It Do?<\/h2>\n\n\n\n

The Faust.js framework<\/a> is a JavaScript framework that makes building headless WordPress simple and easy. It’s based on Next.js but contains two parts, a collection of NPM packages that power the JavaScript frontend and a WordPress plugin that provides a number of helpful backend features.<\/p>\n\n\n\n

\n
\n
\n
<\/path><\/path><\/svg><\/div><\/div>\n\n\n\n

Faust.js<\/p>\n<\/div>\n\n\n\n

The JavaScript framework
specifically for WordPress.<\/p>\n\n\n\n

\n
Download \u2192<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

Even though Faust.js is tightly coupled with React and Next.js, developers can use the plugin and reimplement patterns from Faust.js in other frameworks. That is essentially what we’ll do in this tutorial by copying Faust’s method of content previews in a Nuxt 3 app.<\/p>\n\n\n\n

Installing and Configuring the Faust WordPress Plugin<\/h2>\n\n\n\n

First, you will need to install and activate the Faust.js WordPress plugin<\/a> from the plugin repository. This creates a menu option in Settings > Faust<\/code> that gives you access to the Faust settings menu.<\/p>\n\n\n\n

\"The<\/figure>\n\n\n\n

The official documentation<\/a> outlines what all of these settings do, but for the purposes of this tutorial, you will need to set the Front-end site URL<\/code> to http:\/\/localhost:3000<\/code> and take note of the Secret Key<\/code> field.<\/p>\n\n\n\n

The Faust WordPress plugin helps developers with some common tasks relevant to headless CMS usage by providing options for disabling theme settings and redirecting traffic to your front-end URL. But it also rewrites links inside of the WP Admin area to point to your decoupled front end. <\/p>\n\n\n\n

Once we have these basic settings configured, you can start implementing the preview features inside of your Nuxt 3 app.<\/p>\n\n\n\n

Understanding the Faust.js Auth Flow<\/h2>\n\n\n\n

Since preview data is privileged in WordPress, meaning public users can’t access this data, we need to implement some mechanism to authenticate our Nuxt.js queries with WordPress to ensure that there is a logged-in user and that the user has permission to access the requested data.<\/p>\n\n\n\n

A typical authentication flow in Faust happens in five steps.<\/p>\n\n\n\n

\n

TL;DR<\/strong>: Authentication in Faust.js can happen in five main steps:<\/p>\n\n\n\n

    \n
  1. User initiates request to authenticate data.<\/li>\n\n\n\n
  2. Faust.js facilitates the request for an authorization code from the FaustWP plugin. This code is a short-lived token used to request a refresh and access token.<\/li>\n\n\n\n
  3. Faust.js facilitates a refresh and access token request from the FaustWP plugin using the authorization code.<\/li>\n\n\n\n
  4. Faust.js stores the refresh token in a secure, HTTP-only cookie. The token refresh requests a new access token when the current one expires<\/li>\n\n\n\n
  5. Faust.js stores the access token in memory that you can use in subsequent authenticated requests.<\/li>\n<\/ol>\nFaust.js Docs, How to Handle Authentication<\/a><\/cite><\/blockquote>\n\n\n\n

    If you look at how the Faust.js docs describe the authentication flow, it looks a lot like an OAuth2-type flow<\/a>. In the following steps, you’ll see how to implement these steps in Nuxt.js to request preview data. For this example, you will implement the Redirect Strategy outlined in the Faust.js docs, but with a few meaningful differences.<\/p>\n\n\n\n

    Implementing Faust Auth in Nuxt.js<\/h2>\n\n\n\n

    As you get started with the following steps, it’s worth noting that since the Faust.js plugin is really just the provider of an authentication strategy (similar to OAuth), it’s up to you as the developer to figure out how best that strategy fits into your use case. The following steps outline how to authenticate previews initiated from the WP Admin area, but it’s possible to use this same auth strategy in more complex ways.<\/p>\n\n\n\n

    Storing the Faust Secret Key<\/h3>\n\n\n\n

    The first thing you need to do is provide a copy of the Faust Secret Key<\/code> to your application. To do this, create an .env<\/code> file and add an entry for FAUST_SECRET_KEY<\/code>. The value of this variable should be taken from your Faust plugin screen in WordPress. To make this environment available to Nuxt only on the server, you will need to add a private<\/code> runtime config variable in your nuxt.config.ts<\/code> file.<\/p>\n\n\n

    \/\/ https:\/\/nuxt.com\/docs\/api\/configuration\/nuxt-config<\/span>\n<\/span><\/span>export<\/span> default<\/span> defineNuxtConfig({\n<\/span><\/span>    modules: [\n<\/span><\/span>        '@nuxt\/devtools'<\/span>,\n<\/span><\/span>        '@nuxtjs\/tailwindcss'<\/span> \n<\/span><\/span>    ],\n<\/span><\/span>    runtimeConfig: {\n<\/span><\/span>        public<\/span>: {\n<\/span><\/span>            wordpressUrl: 'https:\/\/acfheadless.wpengine.com'<\/span>,\n<\/span><\/span>            frontendSiteUrl: 'http:\/\/localhost:3000'<\/span>\n<\/span><\/span>        },\n<\/span><\/span>        private<\/span>: {\n<\/span><\/span>          FAUST_SECRET_KEY: process.env.FAUST_SECRET_KEY\n<\/span><\/span>        }\n<\/span><\/span>    }\n<\/span><\/span>})\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Since the value of FAUST_SECRET_KEY<\/code> is used to grant a user access to your site’s API, it’s very important that this value remains a secret. Nuxt offers the ability to create private runtime config values that are only exposed on the server, but I also considered creating my own API endpoints that apply the secret key to certain requests. That is actually more in line with how the Faust Next.js application functions by using an API handler.<\/p>\n\n\n\n
    Respond to Preview Requests in Nuxt<\/h3>\n\n\n\n
    After your application has access to the FAUST_SECRET_KEY<\/code> variable, you’ll need to configure your Nuxt site to respond to the preview routes that Faust.js generates as preview links.<\/p>\n\n\n\n
    With your Front-end site URL<\/code> value set, Faust will rewrite all of the preview links to a path that looks like this:<\/p>\n\n\n
    http:\/\/localhost:3000\/?p=225&preview=true&previewPathname=%2F%3Fp%3D225&typeName=Post<\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    All Nuxt middleware needs to be in the middleware<\/code> directory, and you can create a file called preview.global.ts<\/code> to run the middleware function globally. Inside that file you can create one short function that looks like this:<\/p>\n\n\n
    export<\/span> default<\/span>  defineNuxtRouteMiddleware(async<\/span> (to, from<\/span>) => {\n<\/span><\/span>    if<\/span> (to.query.preview === 'true'<\/span>) {\n<\/span><\/span>        const<\/span> config = useRuntimeConfig();\n<\/span><\/span>        const<\/span> previewId = to.query.p;\n<\/span><\/span>        return<\/span> navigateTo(`${config.public<\/span>.wordpressUrl}<\/span>\/generate?redirect_uri=${config.public<\/span>.frontendSiteUrl}<\/span>\/preview?preview_id=${previewId}<\/span>`<\/span>, {external: true<\/span>})\n<\/span><\/span>    }\n<\/span><\/span>  })\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
    This function listens every time you load or change a route, but only runs code if the route contains the preview=true<\/code> query parameter. Inside the conditional, the function loads the config<\/code> values and extracts the previewId<\/code> of the content item in WordPress.<\/p>\n\n\n\n
    Getting the Authorization Code<\/h3>\n\n\n\n
    Using the navigateTo<\/code> function, you kick off the first leg of the authentication flow by redirecting to the \/generate<\/code> endpoint that the Faust plugin creates on your WordPress site. This endpoint also requires a redirect_url<\/code> query param so that Faust can send the user back to the Nuxt application after the flow. In this example, that part looks like this:<\/p>\n\n\n
    redirect_uri=${config.public<\/span>.frontendSiteUrl}\/preview?preview_id=${previewId}\n<\/span><\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
    This endpoint checks if there is a logged-in user in WordPress and passes you to the WordPress login screen if you’re not logged in. In either case, after successfully authenticating, you should be redirected back to http:\/\/localhost:3000\/preview<\/code> with two query parameters in the URL. The code<\/code> query param contains an authorization code you’ll exchange for an access token in the next step, and previewId<\/code> contains the database id for the content item that genereated the preview request. <\/p>\n\n\n\n
    Generating an Access Token<\/h3>\n\n\n\n
    In the next step of this flow, the preview.vue<\/code> template will do most of the heavy lifting. If your auth flow has been successful, you should wind up at this route with both code<\/code> and preview_id<\/code> query parameters in the URL. The entire script block for this route looks like this:<\/p>\n\n\n
    <script setup>\n<\/span><\/span> import<\/span> {getTokensFromCode, getTokensFromRefreshToken} from<\/span> '..\/faust'<\/span>;\n<\/span><\/span> const<\/span> route = useRoute();\n<\/span><\/span> const<\/span> config = useRuntimeConfig();\n<\/span><\/span> const<\/span> {code, preview_id: previewId} = route.query;\n<\/span><\/span>\n<\/span><\/span> let<\/span> tokens;\n<\/span><\/span>\n<\/span><\/span> const<\/span> cookie = useCookie(`${config.public<\/span>.frontendSiteUrl}<\/span>-rt`<\/span>, {httpOnly: true<\/span>, maxAge: 300<\/span>});\n<\/span><\/span> if<\/span> (cookie.value){\n<\/span><\/span>    const<\/span> refreshToken = cookie.value;\n<\/span><\/span>    tokens = await<\/span> getTokensFromRefreshToken(refreshToken);\n<\/span><\/span>    cookie.value = tokens.refreshToken\n<\/span><\/span>\n<\/span><\/span> } else<\/span> {\n<\/span><\/span>    tokens = await<\/span> getTokensFromCode(code);\n<\/span><\/span>    cookie.value = tokens.refreshToken;\n<\/span><\/span> }\n<\/span><\/span>\n<\/span><\/span>\/\/  use post here so we don't cache any null responses based on invalid credential<\/span>\n<\/span><\/span> const<\/span> {data, pending, refresh, error} = await<\/span> useFetch(`${config.public<\/span>.wordpressUrl}<\/span>\/graphql`<\/span>, {\n<\/span><\/span>    method: 'post'<\/span>,\n<\/span><\/span>    body: JSON<\/span>.stringify({\n<\/span><\/span>        query: `<\/span>\n<\/span><\/span>        query DraftQuery($id: ID!) {<\/span>\n<\/span><\/span>            post(id: $id, idType: DATABASE_ID, asPreview: true) {<\/span>\n<\/span><\/span>                id<\/span>\n<\/span><\/span>                title<\/span>\n<\/span><\/span>                content<\/span>\n<\/span><\/span>                date<\/span>\n<\/span><\/span>            }<\/span>\n<\/span><\/span>        }<\/span>\n<\/span><\/span>        `<\/span>,\n<\/span><\/span>        variables: {\n<\/span><\/span>            id: previewId\n<\/span><\/span>        }\n<\/span><\/span>    }),\n<\/span><\/span>    headers: {\n<\/span><\/span>        Authorization: `Bearer ${tokens.accessToken}<\/span>`<\/span>\n<\/span><\/span>    },\n<\/span><\/span>    transform(data){\n<\/span><\/span>        return<\/span> data.data.post\n<\/span><\/span>    }\n<\/span><\/span> })\n<\/span><\/span>\n<\/span><\/span> \n<\/span><\/span> <\/script><\/span>\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
    In the first few lines, you import a few utilities from the faust<\/code> directory and load runtime config values and the Nuxt router. You can extract the values for code<\/code> and preview_id<\/code> from the current route’s query params, and then declare a variable called tokens<\/code> to store your access and refresh tokens.<\/p>\n\n\n\n
    If this cookie hasn’t been set yet, then you use the code<\/code> passed from the previous step to request an access token. Using the newly generated refreshToken<\/code> value, you can initialize the cookie.<\/p>\n\n\n\n
    Fetching the Access Token in Detail<\/h3>\n\n\n\n
    Now that you have an understanding of how the preview route handles the exchange of a code<\/code> or refreshToken<\/code> for an access token, let’s explode that interaction and examine the getTokenFromCode<\/code> and getTokenFromRefreshToken<\/code> utilities. <\/p>\n\n\n\n
    The code in faust\/index.ts<\/code> looks like this:<\/p>\n\n\n
    type<\/span> Tokens = {   \n<\/span><\/span>    accessToken: string<\/span>;\n<\/span><\/span>    refreshToken: string<\/span>;\n<\/span><\/span>    accessTokenExpiration: number<\/span>;\n<\/span><\/span>    refreshTokenExpiration: number<\/span>;\n<\/span><\/span>\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>export<\/span> async<\/span> function<\/span> getTokensFromCode<\/span>(code:string<\/span><\/span>): Promise<\/span><Tokens<\/span>><\/span>{\n<\/span><\/span>\n<\/span><\/span>    const<\/span> config = useRuntimeConfig();\n<\/span><\/span>    const<\/span> apiClientSecret = config.private.FAUST_SECRET_KEY;\n<\/span><\/span>    if<\/span> (!apiClientSecret) {\n<\/span><\/span>        throw<\/span> new<\/span> Error<\/span>(\n<\/span><\/span>          'The apiClientSecret must be specified to use the auth middleware'<\/span>,\n<\/span><\/span>        );\n<\/span><\/span>      }\n<\/span><\/span>  \n<\/span><\/span>      let<\/span> response = await<\/span> fetch(`https:\/\/acfheadless.wpengine.com\/?rest_route=\/faustwp\/v1\/authorize`<\/span>, {\n<\/span><\/span>        headers: {\n<\/span><\/span>          'Content-Type'<\/span>: 'application\/json'<\/span>,\n<\/span><\/span>          'x-faustwp-secret'<\/span>: apiClientSecret,\n<\/span><\/span>        },\n<\/span><\/span>        method: 'POST'<\/span>,\n<\/span><\/span>        body: JSON<\/span>.stringify({\n<\/span><\/span>          code\n<\/span><\/span>        }),\n<\/span><\/span>      });\n<\/span><\/span>    const<\/span> tokens: Tokens = await<\/span> response.json();\n<\/span><\/span>    return<\/span> tokens;\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>export<\/span> async<\/span> function<\/span> getTokensFromRefreshToken<\/span>(refreshToken:string<\/span><\/span>): Promise<\/span><Tokens<\/span>><\/span>{\n<\/span><\/span>\n<\/span><\/span>    const<\/span> config = useRuntimeConfig();\n<\/span><\/span>    const<\/span> apiClientSecret = config.private.FAUST_SECRET_KEY;\n<\/span><\/span>    if<\/span> (!apiClientSecret) {\n<\/span><\/span>        throw<\/span> new<\/span> Error<\/span>(\n<\/span><\/span>          'The apiClientSecret must be specified to use the auth middleware'<\/span>,\n<\/span><\/span>        );\n<\/span><\/span>      }\n<\/span><\/span>  \n<\/span><\/span>      let<\/span> response = await<\/span> fetch(`https:\/\/acfheadless.wpengine.com\/?rest_route=\/faustwp\/v1\/authorize`<\/span>, {\n<\/span><\/span>        headers: {\n<\/span><\/span>          'Content-Type'<\/span>: 'application\/json'<\/span>,\n<\/span><\/span>          'x-faustwp-secret'<\/span>: apiClientSecret,\n<\/span><\/span>        },\n<\/span><\/span>        method: 'POST'<\/span>,\n<\/span><\/span>        body: JSON<\/span>.stringify({\n<\/span><\/span>            refreshToken\n<\/span><\/span>        }),\n<\/span><\/span>      });\n<\/span><\/span>    const<\/span> tokens: Tokens = await<\/span> response.json();\n<\/span><\/span>    return<\/span> tokens;\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Both of these functions are almost identical in that they generate POST requests to the \/?rest_route=\/faustwp\/v1\/authorize<\/code> endpoint on your WordPress site that Faust creates. This endpoint is what ultimately grants your application access tokens to request privileged data. <\/p>\n\n\n\n
    In addition to sending the code<\/code> or refreshToken<\/code> in the body of your request, you need to pass the FAUST_SECRET_KEY<\/code> in a ‘x-faustwp-secret'<\/code> HTTP header. On the backend, Faust will use both of those values to determine whether the user and application should be granted tokens. The response from this endpoint is shaped like the Tokens<\/code> type contained at the top of this file.<\/p>\n\n\n\n
    Requesting Preview Data from WPGraphQL<\/h3>\n\n\n\n
    Now that you have an actual access token, you can use that token to make an authenticated request to WPGraphQL:<\/p>\n\n\n
    \/\/  use post here so we don't cache any null responses based on invalid credential<\/span>\n<\/span><\/span> const<\/span> {data, pending, refresh, error} = await<\/span> useFetch(`${config.public<\/span>.wordpressUrl}<\/span>\/graphql`<\/span>, {\n<\/span><\/span>    method: 'post'<\/span>,\n<\/span><\/span>    body: JSON<\/span>.stringify({\n<\/span><\/span>        query: `<\/span>\n<\/span><\/span>        query DraftQuery($id: ID!) {<\/span>\n<\/span><\/span>            post(id: $id, idType: DATABASE_ID, asPreview: true) {<\/span>\n<\/span><\/span>                id<\/span>\n<\/span><\/span>                title<\/span>\n<\/span><\/span>                content<\/span>\n<\/span><\/span>                date<\/span>\n<\/span><\/span>            }<\/span>\n<\/span><\/span>        }<\/span>\n<\/span><\/span>        `<\/span>,\n<\/span><\/span>        variables: {\n<\/span><\/span>            id: previewId\n<\/span><\/span>        }\n<\/span><\/span>    }),\n<\/span><\/span>    headers: {\n<\/span><\/span>        Authorization: `Bearer ${tokens.accessToken}<\/span>`<\/span>\n<\/span><\/span>    },\n<\/span><\/span>    transform(data){\n<\/span><\/span>        return<\/span> data.data.post\n<\/span><\/span>    }\n<\/span><\/span> })\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
    If you send this same request without the Authorization<\/code> header, the value of post<\/code> will be null<\/code>instead of throwing an unauthorized error. This is important to note because it is a behavior of GraphQL. Since our query documents can contain multiple queries across resources, some of which may be public and some private, WPGraphQL does not reject queries outright if the endpoint is public. Instead, it will not resolve data for which the current user does not have permission. <\/p>\n\n\n\n
    In this case, without the Authorization<\/code> header to vouch for your identity, WPGraphQL treats your query like a public user and doesn’t resolve data for the preview since public users can’t view preview data. <\/p>\n\n\n\n
    If everything works as it should, your post’s preview data should render inside of the preview.vue<\/code> template.<\/p>\n\n\n\n
    \"A<\/figure>\n\n\n\n
    Wrapping Up<\/h2>\n\n\n\n
    Although this post dives into the weeds of authentication, it was made to intentionally be as simple as possible. There are many use cases this short tutorial does not address, like previewing different templates or layouts based on content type, but hopefully, you can use this auth strategy to satisfy any more complex needs you have in your own work. <\/p>\n\n\n\n
    Even if you use other frameworks like Nuxt.js, the Faust Next.js codebase is a great place to learn about patterns that can be applied to other frameworks.<\/p>\n\n\n\n
    \n
    \n
    \n
    <\/path><\/path><\/svg><\/div><\/div>\n\n\n\n
    Faust.js<\/p>\n<\/div>\n\n\n\n
    The JavaScript framework
    specifically for WordPress.<\/p>\n\n\n\n
    \n
    Download \u2192<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
    If you are looking for a place to host your next headless WordPress project, be sure to get a free sandbox account on our Atlas Platform. The platform combines Node.js hosting, WordPress hosting, and a CDN layer into one convenient dashboard to manage your headless sites.<\/p>\n\n\n\n
    \n
    \n
    Headless
    Platform<\/p>\n\n\n\n
    The all-in-one platform for 
    radically fast headless sites.<\/p>\n\n\n\n
    \n
    Try for free \u2192<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    In this short article, you’ll learn how to implement post and content previews in a Nuxt 3 application using the Faust.js WordPress plugin. All of the code for this article […]<\/p>\n","protected":false},"author":19,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"categories":[23],"tags":[25,27,26],"class_list":["post-5505","post","type-post","status-publish","format-standard","hentry","category-headless","tag-faust-js","tag-nuxt-js","tag-wpgraphql"],"yoast_head":"\nHeadless WordPress Post Previews in Nuxt 3 - Builders<\/title>\n<meta name=\"description\" content=\"In this post, you'll learn how to implement post previews from headless WordPress in a Nuxt 3 application.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpengine.com\/builders\/headless-wordpress-post-previews-in-nuxt-3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Headless WordPress Post Previews in Nuxt 3\" \/>\n<meta property=\"og:description\" content=\"In this post, you'll learn how to implement post previews from headless WordPress in a Nuxt 3 application.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/headless-wordpress-post-previews-in-nuxt-3\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-27T17:16:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-27T17:25:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/07\/headless-wordpress-post-previews-nuxt3.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jeff Everhart\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Headless WordPress Post Previews in Nuxt 3\" \/>\n<meta name=\"twitter:description\" content=\"In this post, you'll learn how to implement post previews from headless WordPress in a Nuxt 3 application.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/07\/headless-wordpress-post-previews-nuxt3.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:site\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeff Everhart\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-post-previews-in-nuxt-3\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-post-previews-in-nuxt-3\\\/\"},\"author\":{\"name\":\"Jeff Everhart\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/b5a7f380738d25f57b00a5aaacf3db52\"},\"headline\":\"Headless WordPress Post Previews in Nuxt 3\",\"datePublished\":\"2023-07-27T17:16:19+00:00\",\"dateModified\":\"2023-07-27T17:25:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-post-previews-in-nuxt-3\\\/\"},\"wordCount\":1782,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-post-previews-in-nuxt-3\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/Screenshot-2023-07-27-at-9.53.20-AM-1024x651.png\",\"keywords\":[\"Faust.js\",\"Nuxt.js\",\"WPGraphQL\"],\"articleSection\":[\"Headless\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-post-previews-in-nuxt-3\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-post-previews-in-nuxt-3\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-post-previews-in-nuxt-3\\\/\",\"name\":\"Headless WordPress Post Previews in Nuxt 3 - Builders\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-post-previews-in-nuxt-3\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-post-previews-in-nuxt-3\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/Screenshot-2023-07-27-at-9.53.20-AM-1024x651.png\",\"datePublished\":\"2023-07-27T17:16:19+00:00\",\"dateModified\":\"2023-07-27T17:25:06+00:00\",\"description\":\"In this post, you'll learn how to implement post previews from headless WordPress in a Nuxt 3 application.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-post-previews-in-nuxt-3\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-post-previews-in-nuxt-3\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-post-previews-in-nuxt-3\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/Screenshot-2023-07-27-at-9.53.20-AM.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/Screenshot-2023-07-27-at-9.53.20-AM.png\",\"width\":1476,\"height\":938},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/headless-wordpress-post-previews-in-nuxt-3\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Headless WordPress Post Previews in Nuxt 3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"name\":\"Builders\",\"description\":\"Reimagining the way we build with WordPress.\",\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\",\"name\":\"WP Engine\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"width\":348,\"height\":68,\"caption\":\"WP Engine\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/wpebuilders\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCh1WuL54XFb9ZI6m6goFv1g\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/b5a7f380738d25f57b00a5aaacf3db52\",\"name\":\"Jeff Everhart\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/237d84b2a63acb8c427ba3246f9c5fc1b436aac578a5df421927c23b4fde45f5?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/237d84b2a63acb8c427ba3246f9c5fc1b436aac578a5df421927c23b4fde45f5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/237d84b2a63acb8c427ba3246f9c5fc1b436aac578a5df421927c23b4fde45f5?s=96&d=mm&r=g\",\"caption\":\"Jeff Everhart\"},\"description\":\"Jeff is a Senior Developer Advocate at WP Engine, focusing on educational resources that blend JavaScript and WordPress to support the Atlas headless WordPress platform and ecosystem.\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/author\\\/jeff-everhartwpengine-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Headless WordPress Post Previews in Nuxt 3 - Builders","description":"In this post, you'll learn how to implement post previews from headless WordPress in a Nuxt 3 application.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpengine.com\/builders\/headless-wordpress-post-previews-in-nuxt-3\/","og_locale":"en_US","og_type":"article","og_title":"Headless WordPress Post Previews in Nuxt 3","og_description":"In this post, you'll learn how to implement post previews from headless WordPress in a Nuxt 3 application.","og_url":"https:\/\/wpengine.com\/builders\/headless-wordpress-post-previews-in-nuxt-3\/","og_site_name":"Builders","article_published_time":"2023-07-27T17:16:19+00:00","article_modified_time":"2023-07-27T17:25:06+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/07\/headless-wordpress-post-previews-nuxt3.jpg","type":"image\/jpeg"}],"author":"Jeff Everhart","twitter_card":"summary_large_image","twitter_title":"Headless WordPress Post Previews in Nuxt 3","twitter_description":"In this post, you'll learn how to implement post previews from headless WordPress in a Nuxt 3 application.","twitter_image":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/07\/headless-wordpress-post-previews-nuxt3.jpg","twitter_creator":"@wpebuilders","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Jeff Everhart","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/headless-wordpress-post-previews-in-nuxt-3\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/headless-wordpress-post-previews-in-nuxt-3\/"},"author":{"name":"Jeff Everhart","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/b5a7f380738d25f57b00a5aaacf3db52"},"headline":"Headless WordPress Post Previews in Nuxt 3","datePublished":"2023-07-27T17:16:19+00:00","dateModified":"2023-07-27T17:25:06+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/headless-wordpress-post-previews-in-nuxt-3\/"},"wordCount":1782,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"image":{"@id":"https:\/\/wpengine.com\/builders\/headless-wordpress-post-previews-in-nuxt-3\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-27-at-9.53.20-AM-1024x651.png","keywords":["Faust.js","Nuxt.js","WPGraphQL"],"articleSection":["Headless"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/headless-wordpress-post-previews-in-nuxt-3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/headless-wordpress-post-previews-in-nuxt-3\/","url":"https:\/\/wpengine.com\/builders\/headless-wordpress-post-previews-in-nuxt-3\/","name":"Headless WordPress Post Previews in Nuxt 3 - Builders","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wpengine.com\/builders\/headless-wordpress-post-previews-in-nuxt-3\/#primaryimage"},"image":{"@id":"https:\/\/wpengine.com\/builders\/headless-wordpress-post-previews-in-nuxt-3\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-27-at-9.53.20-AM-1024x651.png","datePublished":"2023-07-27T17:16:19+00:00","dateModified":"2023-07-27T17:25:06+00:00","description":"In this post, you'll learn how to implement post previews from headless WordPress in a Nuxt 3 application.","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/headless-wordpress-post-previews-in-nuxt-3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/headless-wordpress-post-previews-in-nuxt-3\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/headless-wordpress-post-previews-in-nuxt-3\/#primaryimage","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-27-at-9.53.20-AM.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/07\/Screenshot-2023-07-27-at-9.53.20-AM.png","width":1476,"height":938},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/headless-wordpress-post-previews-in-nuxt-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"Headless WordPress Post Previews in Nuxt 3"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/builders\/#website","url":"https:\/\/wpengine.com\/builders\/","name":"Builders","description":"Reimagining the way we build with WordPress.","publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/builders\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wpengine.com\/builders\/#organization","name":"WP Engine","url":"https:\/\/wpengine.com\/builders\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","width":348,"height":68,"caption":"WP Engine"},"image":{"@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/wpebuilders","https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g"]},{"@type":"Person","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/b5a7f380738d25f57b00a5aaacf3db52","name":"Jeff Everhart","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/237d84b2a63acb8c427ba3246f9c5fc1b436aac578a5df421927c23b4fde45f5?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/237d84b2a63acb8c427ba3246f9c5fc1b436aac578a5df421927c23b4fde45f5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/237d84b2a63acb8c427ba3246f9c5fc1b436aac578a5df421927c23b4fde45f5?s=96&d=mm&r=g","caption":"Jeff Everhart"},"description":"Jeff is a Senior Developer Advocate at WP Engine, focusing on educational resources that blend JavaScript and WordPress to support the Atlas headless WordPress platform and ecosystem.","url":"https:\/\/wpengine.com\/builders\/author\/jeff-everhartwpengine-com\/"}]}},"_links":{"self":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/5505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/comments?post=5505"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/5505\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=5505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=5505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=5505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
    In the example above, you can see that this query uses the asPreview<\/code> argument set to true<\/code> when fetching data for this post using the database ID. However, to authenticate this request, you need to add an Authorization header<\/a> to your HTTP request using the Bearer authentication scheme: Bearer YourSecureTokenHere<\/code>. This auth scheme is used primarily with token-based auth mechanisms. <\/p>\n\n\n\n
    The next section of code is where those tokens are actually generated. Using the useCookie composable<\/a> from Nuxt, you can create a cookie to store the value of  refreshToken<\/code> as a way of extending your authenticated session. If the cookie already has a value, then you can use the value of the refresh token to request a new access token, overwriting the value of the refresh token stored in the cookie with a new value. <\/p>\n\n\n\n
    Basically, you’ll need to listen for this path and react to it, kicking off the authentication flow with the Faust plugin. To do this, you can create a small piece of global middleware<\/a> to react to the preview=true<\/code> query param.<\/p>\n\n\n\n