Fetching Content

Easily connect your Nuxt.js application to your content hosted on Prismic

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(
      $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)
  }
}
Edit this page on GitHub Updated at Mon, May 10, 2021