Injected Kits
Easily connect your Nuxt.js application to your content hosted on Prismic
The main advantage of using this module is that it injects and configures for you Prismic kits, easing your development workflow with those.
Methods and properties exposed by those kits are made available through a $prismic object which is injected globally, meaning that you can access it anywhere using this.$prismic. For plugins, asyncData, nuxtServerInit and middlewares, you can access it from context.$prismic.
@prismicio/client
This kit provides functions necessary to query Prismic API. It mainly grants access to the Prismic API object and its predicates:
$prismic.api.query(/* ... */) // API query example
$prismic.predicate.at(/* ... */) // `at` predicate example
You can check our example on fetching a document or learn more on how to query the API on Prismic documentation.
prismic-dom
This kit provides a set of helpers to handle Prismic data. They are injected inside your Nuxt.js application through the $prismic object:
$prismic.asHTML(richText) // link resolver is provided
$prismic.asText(richText)
$prismic.asLink(link) // link resolver is provided
$prismic.asDate(date)
@prismicio/vue
This kit provides a set of components to easily display Prismic data. They are injected inside your Vue.js application as global components therefore making them accessible from anywhere, here's their basic usage:
<!-- link resolver is provided -->
<prismic-rich-text :field="doc.text" />
<prismic-text :field="doc.text" />
<!-- link resolver is provided -->
<prismic-link :field="doc.link">My link</prismic-link>
<prismic-image :field="doc.image" />
<prismic-embed :field="doc.embed" />
<slice-zone :components="components" :slices="doc.slices" />
More on templating Prismic data on Prismic documentation.
You can disable injection of those components through module's configuration.