CMS Data

[M4TThys123]

<img

<beschrijving

[M4TThys123]

👀 Analyseren:

To-do:

• [ ] Fetch basic Prismic data
• [ ] Store all data in prismic
• [ ] Make a Prismic view component
• [ ] Make a Prismic section component

[M4TThys123]

🔨 Bouwen:

Fetch basic Prismic data

PrismicData-1.vue

Voor deze fetch heb ik gebruik gemaakt van de fetch hook van vue.

npm install prismic-javascript

Op basis van een artikel over fetchen van prismic data, kwam ik uit bij deze fetch, maar ik kreeg super veel errors. Ik vermoed dat deze documentatie voor Vue 2 was. Ik maak gebrijk van vue 3

<template>
  <div>
    <h1>{{ document.data.title }}</h1>
    <p>{{ document.data.description }}</p>
  </div>
</template>

<script>
import Prismic from 'prismic-javascript'

export default {
  name: 'PrismicData',
  data() {
    return {
      document: null
    }
  },
  async fetch() {
    const apiEndpoint = 'https://jbinstallatieservice.cdn.prismic.io/api/v2'
    const client = Prismic.client(apiEndpoint)

    const document = await client.getSingle('main')

    this.document = document
  }
}
</script>

PrismicData-2.vue

Hiervoor heb ik gekozen om terug te gaan naar de documentatie van Vue/Prismic.

npm install @prismicio/vue