Fetching content

This page is meant to show you some content fetching strategies with this module, please refer to Prismic documentation to learn more on querying the API.

From a Page

pages/_uid.vue
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' })
    }
  }
}
pages/_uid.vue
export default {
  async asyncData({ $prismic, params, error }) {
    const document = await $prismic.api.query(
      this.$prismic.predicates.at('my.page.uid', params.uid)
    )

    if (document) {
      return { document }
    } else {
      error({ statusCode: 404, message: 'Page not found' })
    }
  }
}

From a Component

components/AppHeader.vue
export default {
  async fetch() {
    this.headerData = await this.$prismic.api.getSingle('header')
  },
  data() {
    return {
      headerData: {}
    }
  }
}

From Vuex Store

store/index.js
export const state = () => ({
  settings: {}
})

export const mutations = {
  setSettings(state, settings) {
    state.settings = settings
  }
}

export const actions = {
  async loadSettings({ commit }) {
    const settings = await this.$prismic.api.getSingle('site_settings')
    commit('setSettings', settings)
  }
}