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.predicate.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, Mar 13, 2023