$prismic module in normal methods, Nuxt

Developing with Prismic
1

I need to use $prismic module in Nuxt normal methods, how can I use it other than asyncData?

How to import it?

2 
<script>
export default {
  async asyncData ({ app }) {
    const document = (await app.$prismic.api.getSingle('homepage')).data
    return {
      document
    }
  }
}
</script>

Should do the trick.

Edit, it’s either that or app.context.$prismic. Your best bet is to console.log(arguments), and find it in the resulting object.

3

Thanks, but let me rephrase the question…

asyncData is not available to use in components by Nuxt. It can only be used in Pages/Routed Links

So I want to use $prismic module in normal function other than asyncData how can I use it?

4

Oh I see what you mean!

In which case, it’s either best to pass data as a prop from the parent page, or you can use it within mounted as this.$prismic.

5

Ok, Thanks... Let me try mounted() because data as prop is not applicable in my scenario.

6

The caveat is it won’t be instant data. A good UI tip is:

<template>
  <div>
    <div v-if="loading">
      Loading...
    </div>
    <div v-else>
      <!-- Show component data -->
    </div>
  </div>
</template>

<script>
export default {
  data () {
    loading: true,
    prismicInfo: null,
  },
  async mounted () {
    const { data } = await this.$prismic.api. // insert query
    this.prismicInfo = data
    this.loading = false
  },
}
</script>
7

This issue has been closed due to inactivity.