-
Notifications
You must be signed in to change notification settings - Fork 48
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
172b3e9
commit d64359e
Showing
1 changed file
with
14 additions
and
76 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,97 +1,35 @@ | ||
| # prismic-nuxt [](https://travis-ci.com/jamespegg/prismic-nuxt) [](https://coveralls.io/github/jamespegg/prismic-nuxt?branch=master) [](https://badge.fury.io/js/prismic-nuxt) | ||
| Easily add Prismic to your next Nuxt project with `prismic-nuxt` | ||
| Headless CMS meets Universal Apps - Nuxt.js plugin for Prismic | ||
|
|
||
| # Installation | ||
| `$ npm install prismic-nuxt` | ||
| ``` | ||
| $ yarn add prismic-nuxt | ||
| ``` | ||
|
|
||
| * [Getting Started](https://prismic-nuxt.js.org/docs/getting-started) - Get up and running in a few minutes. | ||
| * [Full documentation](https://prismic-nuxt.js.org/) - Full API documentation and examples. | ||
|
|
||
| # Features | ||
| * Easily access the Prismic Javascript library via `$prismic` | ||
| * Easily access the Prismic DOM library via `$prismic.dom` | ||
| * Support for Prismic previews built in | ||
| * __Batteries Included__: Easily access official Prismic JavaScript & Prismic DOM libraries in your Nuxt.js app. | ||
| * __Preview Mode__: Automatically add Prismic Previews to your site without additional configuration. | ||
| * __Compact Configuration__: Just add your Prismic repository endpoint and a link resolver and you're good to go. | ||
|
|
||
| # Usage | ||
| To get started, you need to add `prismic-nuxt` to your `nuxt.config.js` file; | ||
| # Quick Start | ||
| Install `prismic-nuxt` and add the following minimal configuration to `nuxt-config.js`; | ||
|
|
||
| ```javascript | ||
| ... | ||
| modules: [ | ||
| ['prismic-nuxt', { | ||
| endpoint: 'https://<REPOSITORY>.cdn.prismic.io/api/v2', | ||
| deferLoad: true, //Optionally defer loading the prismic preview script | ||
| linkResolver: function(doc, ctx) { | ||
| return '/' | ||
| }, | ||
| htmlSerializer: function(type, element, content, children) { | ||
| // Optional HTML Serializer | ||
| } | ||
| }] | ||
| ] | ||
| ``` | ||
|
|
||
| You need to pass in your endpoint URL and a `linkResolver` function. | ||
|
|
||
| Now you can access Prismic in any part of your Nuxt app; | ||
|
|
||
| ```vue | ||
| <template> | ||
| <section> | ||
| <div v-html="$prismic.dom.RichText.asHtml(document.data.title, $prismic.linkResolver)"></div> | ||
| </section> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| async asyncData({ app, error }) { | ||
| let document = await app.$prismic.api.getByUID('page', 'my-page') | ||
| if (document) { | ||
| return { document } | ||
| } else { | ||
| error({ statusCode: 404, message: 'Page not found' }) | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
| <style scoped> | ||
| .title | ||
| { | ||
| margin: 50px 0; | ||
| } | ||
| </style> | ||
| ``` | ||
|
|
||
| # Using previews on statically generated content | ||
| If you're statically generating your website, you have to slightly tweak how you fetch content. Nuxt won't run the `asyncData` function again to get fresh data. The easiest thing is to the use the `created` lifecycle hook to force the page to get the most up to date content from Prismic; | ||
|
|
||
| ```vue | ||
| ... | ||
| <script> | ||
| function getPage(prismic) { | ||
| return prismic.api.getByUID('page', 'my-page') | ||
| } | ||
| export default { | ||
| async asyncData({ app, error }) { | ||
| let document = await getPage(app.$prismic) | ||
| if (document) { | ||
| return { document } | ||
| } else { | ||
| error({ statusCode: 404, message: 'Page not found' }) | ||
| } | ||
| }, | ||
| created() { | ||
| getPage(this.$prismic).then(document => { | ||
| this.document = document | ||
| }) | ||
| } | ||
| } | ||
| </script> | ||
| ... | ||
| ``` | ||
| You can now access Prismic inside your Nuxt.js app through the `$prismic` variable. Follow our [Getting Started](https://prismic-nuxt.js.org/docs/getting-started) guide for further documentation and examples. | ||
|
|
||
| # Node v8 Support | ||
| Since v0.5.0, `prismic-nuxt` should now work with Node v8 and above. We don't manually test on Node v8, however unit tests will now be tested on both Node v8 and V10 on Travis. There's no guarantees that it'll work as expected, especially after Node v8 drops out of support in January 2020. |