I am brand new to Prismic. I have an existing Vue site with Nuxt. I have done the basics for setup but when I get to the "fetch" part of the documentation, I get stuck.
For some reason, I cannot get any data from "$prismic" it comes back undefined.
My nuxt.config.js matches the "crash course" but I can't seem to get data to be fetched.
I also copied the block of code that fetches the data. I get " Cannot read properties of undefined (reading 'api')"
What am I missing?
Hello @mitchel, can you show us exactly where you got stuck in the guide?
How are you creating your page queries?
I get to the "fetch data" section.
export default {
async asyncData({ $prismic, params, error }) {
const document = await $prismic.api.getByUID('page', params.uid)
if (document) {
return { document }
} else {
error({ statusCode: 404, message: 'Page not found' })
}
}
}
It bombs on the "$prismic" part. I try to console.log it, and it comes back undefined.
This should work just fine if you are using the latest version of the kit.
Are you still experiencing this error?
I have the same problem, I created a new nuxt project entirely and the pluggin itself seems to break. I looked at prismic.js and it's not initializing the client correctly, so it crash everytime, I initialized my own prismic.js and injected $prismicCustom where I initialise prismic client correctly (using prismic.createClient instead of just prismic.client) and it works, but it's something that should be updated on the plugin.
I tried with an older version of nuxtjs/prismic like one of the starter and it works fine, but the latest version does not work, and the documentation seems way off, I'm thinking about using another headless CMS just because of this, Prismic seems cool but not having a functionnal documentation makes it hard to start.
Which version of Nuxt are you creating this with? fetching content in Nuxt3 is handled differently.
Can you post your Nuxt config and package.json files?
I was on Nuxt 2. We are moving to Nuxt 3 and Vue 3 now as a result.
Hello everyone. The DevX has some follow-up for your questions:
@mitchel and @sebpaquets could you please share more info about your setup?
@sebpaquets is it possible that you used the Nuxt 2 module on a Nuxt 3 app?
Hello! I am having the same issues trying to fetch data from Nuxt.
After installation and setup I have created two custom types to test.
Nuxt config (nuxt.config.js file):
import { apiEndpoint, token } from './sm.json'
export default {
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://nuxt.com/modules/prismic https://prismic.io/docs/nuxt
'@nuxtjs/prismic',
],
prismic: {
endpoint: apiEndpoint,
apiOptions: {
accessToken: token
},
modern: true
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
transpile: ["@prismicio/vue"]
}
}
sm.json file:
{
"apiEndpoint": "https://MY_REPO.prismic.io/api/v2",
"token": "MY_TOKEN",
"libraries": [
"@/slices"
],
"_latest": "0.7.0",
"localSliceSimulatorURL": "http://localhost:3000/slice-simulator"
}
Then I have created a sample page to test API calls (primic.vue):
<template>
<main>
<section>
<button @click="getData">Fetch Data</button>
<h1 v-if="document.data">{{ document.data.title }}</h1>
<PrismicRichText v-if="document.data" :field="document.data.content" />
</section>
</main>
</template>
<script>
export default {
async asyncData({ $prismic, error }) {
// const document = await $prismic.api.getByUID('static_page', 'legal-advise') Not working
const document = await $prismic.api.getSingle('legal-advise') // No results
if (document) {
return { document }
} else {
return {
document: {}
}
}
},
methods: {
async getData() {
const response = await this.$prismic.api.getSingle('legal-advise')
this.document = response || {}
}
}
}
</script>
When I find using the getByUID method the API returns an error:
{
message: "[function at(..)] unexpected field 'my.static_page.uid' on line:1 col:6 in query '[[at(my.static_page.uid, \"legal-advise\")]]'\n[[at(my.static_page.uid, \"legal-advise\")]]\n ^\n"
pos: {line: 1, column: 6, id: 0, location: "query"}
type: "api_parsing_error"
}
And when i use the getSingle method it returns no results:
{
"page": 1,
"results_per_page": 1,
"results_size": 0,
"total_results_size": 0,
"total_pages": 0,
"next_page": null,
"prev_page": null,
"results": [],
"version": "0427058",
"license": "All Rights Reserved"
}
I used the SlideMachine to create the custom types. In this example, the "static_page" is the custom type and "legal_avise" is a document associated to this custom type having UID, title and RichText props.
Mock config for "static_page" custom type:
{
"uid": {
"__TYPE__": "UIDContent",
"value": "pond"
},
"title": {
"__TYPE__": "FieldContent",
"value": "eaten",
"type": "Text"
},
"content": {
"__TYPE__": "StructuredTextContent",
"value": [
{
"type": "paragraph",
"content": {
"text": "Dolor aliquip ea ullamco eu qui occaecat occaecat dolore reprehenderit dolor ea occaecat id ut."
}
}
]
}
}
Prismic.io document:
I also tried to use the API Browser to test queries and fething documents but still having no results.
Versions:
Nuxt: 2.15.8
@nuxtjs/prismic: 1.4.2
@prismicio/slice-simulator-vue: 0.2.2
Can you help me? Thanks a lot!
Hey @adrian1, I tried using a similar setup as you did and it's working fine for me. Are you still seeing this error?
For me, this problem started when I used fetch inside components.
It works If I reload the page but on transition to another page that his component with fetch it doesn't work
Any suggestions?
Nuxt: 2.15.8
@nuxtjs/prismic: 1.4.2
@prismicio/slice-simulator-vue: 0.2.1
Hi!
Finally I started a new project and it is working so maybe it is an issolated bug.
Thank you.
