$prismic module in normal methods, Nuxt

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

How to import it?

<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.

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?

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.

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

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>