<template>
  <Layout>
    <!-- Mise en page -->
    <div v-for="edge in $page.chapitres.edges" :key="`sommaire${edge.node.id}`">
      <h2>{{edge.node.titre}}</h2>
    </div>
    <div v-for="edge in $page.chapitres.edges" :key="`chapitres${edge.node.id}`">
      <h2>{{edge.node.titre}}</h2>
      {{edge.node.contenu}}
    </div>

  </Layout>
</template>

<script>
import { Previewer } from 'pagedjs'

export default {
  mounted(){
    this.$nextTick(()=>{
      let previewer = new Previewer();
      previewer.preview();
    })
  }
}
</script>

<page-query>
  query {
    chapitres: allChapitres {
      edges {
        node {
          id
          titre
          contenu
        }
      }
    }
  }
</page-query>
