https://github.com/bchiang7/nuxt-prismic-previews
Getting Prismic Previews to work with a static Nuxt site hosted on Netlify
https://github.com/bchiang7/nuxt-prismic-previews
middleware netlify nuxt prismic-previews
Last synced: 21 days ago
JSON representation
Getting Prismic Previews to work with a static Nuxt site hosted on Netlify
- Host: GitHub
- URL: https://github.com/bchiang7/nuxt-prismic-previews
- Owner: bchiang7
- Created: 2019-10-02T00:42:44.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-07-31T22:25:40.000Z (over 4 years ago)
- Last Synced: 2025-02-13T21:45:07.189Z (2 months ago)
- Topics: middleware, netlify, nuxt, prismic-previews
- Language: Vue
- Homepage:
- Size: 718 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# nuxt-prismic-previews
[](https://app.netlify.com/sites/nuxt-prismic-previews/deploys)
> Getting Prismic Previews to work with a statically generated Nuxt site
## Setup
``` bash
# install dependencies
npm run install
# serve with hot reload at localhost:3000
npm run dev
# build for production and launch server
npm run build
npm run start
# generate static project
npm run generate
```
For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
## Getting Prismic Previews to work with a static Nuxt site (i.e. hosted on Netlify)
1. Spin up a new Nuxt project with [`create-nuxt-app`](https://nuxtjs.org/guide/installation#using-code-create-nuxt-app-code-)
2. Follow Prismic's [Using Prismic with Nuxt.js](https://prismic.io/docs/vuejs/getting-started/primsic-nuxt) guide
3. Make sure you have a `/preview` route by following the instructions in the "Setting up your preview route" section of Prismic's [Using Prismic with Nuxt.js](https://prismic.io/docs/vuejs/getting-started/primsic-nuxt) guide
4. Add a file to the `middleware` folder called `preview.js`
5. Declare the middleware to the `router` object in your `nuxt.config.js`
```js
// nuxt.config.js
router: {
middleware: 'preview',
},
```
6. Paste the following in your preview middleware (adopted from [`prismic-nuxt`](https://github.com/jamespegg/prismic-nuxt))
```js
// middleware/preview.js
import Prismic from 'prismic-javascript';
import PrismicConfig from '~/prismic.config.js';
import LinkResolver from '~/plugins/link-resolver.js';
export default async function(context) {
const { route, query, redirect, res } = context;
const api = Prismic.getApi(PrismicConfig.apiEndpoint);
if (route.path === '/preview') {
const { token } = query;
if (token) {
const url = await api.previewSession(token, LinkResolver, '/');
const cookie = [
`${Prismic.previewCookie}=${token}`,
`max-age=${30 * 60 * 1000}`,
'path=/',
].join('; ');
if (process.server) {
// Server-side
res.setHeader('Set-Cookie', [cookie]);
} else {
// Client-side
document.cookie = cookie;
}
redirect(302, url);
} else {
redirect(302, '/');
}
}
}
```
7. Hack to fetch preview content with a static site
Since Nuxt won't automatically run the `asyncData` function again to fetch the data you want to preview, we have to use the `created` lifecycle hook to force the page to get preview content from Prismic instead of the actual published content.
```js
// pages/mypage.vue
import Prismic from 'prismic-javascript';
import PrismicConfig from '~/prismic.config.js';
async function getPage(options = {}) {
const api = await Prismic.getApi(PrismicConfig.apiEndpoint, options);
return api.getByUID('page', 'my-page');
}
export default {
async asyncData({ app, context, error, req }) {
try {
const result = await getPage({ req });
return {
document: result.data,
documentId: result.id,
};
} catch (e) {
error({ statusCode: 404, message: 'Page not found' });
}
},
created() {
this.refetchPageforPreview();
},
methods: {
async refetchPageForPreview() {
try {
const result = await getPage();
this.document = result.data;
} catch (e) {
error({ statusCode: 404, message: 'Page not found' });
}
},
},
};
```
8. In your Prismic repo go to `Settings` -> `Previews` -> `Create a Preview`
9. Once deployed to Netlify, fill in the details with `/preview` in the `Link Resolver` field