@vue-storefront/prismic
v0.1.0
Published
> Prismic library for Next
Downloads
21
Keywords
Readme
prismic
Prismic library for Next
Installation
With Yarn:
yarn add @vue-storefront/prismic
With NPM:
npm install --save @vue-storefront/prismic
Setup library
import { setup } from '@vue-storefront/prismic'
setup({
endpoint: 'https://your-account.prismic.io/api/v2',
apiOptions: {
accessToken: 'Prismic_Access_Token'
}
});
Nuxt support
If you need to integrate Prismic with Nuxt, just simply provide setup file (that one above for example) into nuxt.config.js
plugins section.
Example usage
<template>
<div>
<div v-for="page in pages" :key="getPageId(page)">
<div v-for="(block, i) in getBlocks(page.data)" :key="i">
<div v-html="block" />
</div>
<div v-for="(slice, i) in getSlices(page)" :key="`slice-${i}`">
<p>slice #{{i+1}}</p>
<div v-html="getBlocks(slice, 'primary')" />
<div v-for="(item, j) in slice.items" :key="`slice-${i}-${j}`">
<div v-for="(block, k) in getBlocks(item)" :key="`slice-block-${k}`">
<div v-html="block" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { computed } from '@vue/composition-api';
import { usePrismic, getPages, getBlocks, getSlices, getPageId } from '@vue-storefront/prismic';
export default {
setup() {
const { doc, search, loading, error } = usePrismic();
const pages = computed(() => getPages(doc.value));
search({
at: {
fragment: 'document.type',
value: 'slices'
}
});
return {
pages,
loading,
error,
getBlocks,
getSlices,
getPageId
};
}
};
</script>