# Cannot fetch data

**URL:** <https://community.prismic.io/t/cannot-fetch-data/11550>\
**Category:** Developing with Prismic\
**Created:** [November 2, 2022, 9:12pm UTC](https://community.prismic.io/t/cannot-fetch-data/11550 "2022-11-02T21:12:32Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![mitchel](https://avatars.discourse-cdn.com/v4/letter/m/eada6e/32.png) [@mitchel](https://community.prismic.io/u/mitchel)\
**Post date:** [November 2, 2022, 9:12pm UTC](https://community.prismic.io/t/cannot-fetch-data/11550/1 "2022-11-02T21:12:32Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [November 4, 2022, 12:19am UTC](https://community.prismic.io/t/cannot-fetch-data/11550/3 "2022-11-04T00:19:40Z")

</div>

Hello @mitchel, can you show us exactly where you got stuck in the guide?  
How are you creating your page queries?

---

<div class="post-metadata">

**Author:** ![mitchel](https://avatars.discourse-cdn.com/v4/letter/m/eada6e/32.png) [@mitchel](https://community.prismic.io/u/mitchel)\
**Post date:** [November 4, 2022, 1:08pm UTC](https://community.prismic.io/t/cannot-fetch-data/11550/4 "2022-11-04T13:08:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [November 9, 2022, 6:51pm UTC](https://community.prismic.io/t/cannot-fetch-data/11550/5 "2022-11-09T18:51:41Z")

</div>

This should work just fine if you are using the latest version of the kit.  
Are you still experiencing this error?

---

<div class="post-metadata">

**Author:** ![sebpaquets](https://avatars.discourse-cdn.com/v4/letter/s/65b543/32.png) [@sebpaquets](https://community.prismic.io/u/sebpaquets)\
**Post date:** [November 11, 2022, 4:18am UTC](https://community.prismic.io/t/cannot-fetch-data/11550/6 "2022-11-11T04:18:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jake](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/jake/32/5120_2.png) [@jake](https://community.prismic.io/u/jake)\
**Post date:** [November 11, 2022, 12:24pm UTC](https://community.prismic.io/t/cannot-fetch-data/11550/7 "2022-11-11T12:24:44Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![mitchel](https://avatars.discourse-cdn.com/v4/letter/m/eada6e/32.png) [@mitchel](https://community.prismic.io/u/mitchel)\
**Post date:** [November 11, 2022, 1:07pm UTC](https://community.prismic.io/t/cannot-fetch-data/11550/8 "2022-11-11T13:07:05Z")

</div>

I was on Nuxt 2. We are moving to Nuxt 3 and Vue 3 now as a result.

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [November 15, 2022, 5:12pm UTC](https://community.prismic.io/t/cannot-fetch-data/11550/9 "2022-11-15T17:12:28Z")

</div>

Hello everyone. The DevX has some follow-up for your questions:

@mitchel and @sebpaquets could you please share more info about your setup?

- Nuxt version
- Nuxt Prismic module version
- Nuxt configuration, anything he thinks could be helpful, a
- Also, the steps to be able to make a minimal reproduction can be useful as well.

@sebpaquets is it possible that you used the Nuxt 2 module on a Nuxt 3 app?

---

<div class="post-metadata">

**Author:** ![adrian1](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/adrian1/32/7933_2.png) [@adrian1](https://community.prismic.io/u/adrian1)\
**Post date:** [March 9, 2023, 2:16pm UTC](https://community.prismic.io/t/cannot-fetch-data/11550/11 "2023-03-09T14:16:45Z")

</div>

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)**:

```js
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** :

```auto
{
  "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)**:

```auto
<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:

```auto
{
  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:

```auto
{
  "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:

```auto
{
  "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](http://Prismic.io) document:

 ![Captura desde 2023-03-09 15-14-33](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/9/999b744789b7bbbe7180434f38f08825328d578f.png)

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!

---

<div class="post-metadata">

**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\
**Post date:** [March 13, 2023, 6:05pm UTC](https://community.prismic.io/t/cannot-fetch-data/11550/14 "2023-03-13T18:05:17Z")

</div>

Hey @adrian1, I tried using a similar setup as you did and it's working fine for me. Are you still seeing this error?

---

<div class="post-metadata">

**Author:** ![thezumrad](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/thezumrad/32/4475_2.png) [@thezumrad](https://community.prismic.io/u/thezumrad)\
**Post date:** [March 25, 2023, 6:59pm UTC](https://community.prismic.io/t/cannot-fetch-data/11550/16 "2023-03-25T18:59:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![adrian1](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/adrian1/32/7933_2.png) [@adrian1](https://community.prismic.io/u/adrian1)\
**Post date:** [March 30, 2023, 2:31pm UTC](https://community.prismic.io/t/cannot-fetch-data/11550/17 "2023-03-30T14:31:03Z")

</div>

Hi!

Finally I started a new project and it is working so maybe it is an issolated bug.

Thank you.