popsu_rouen_strapi/src/pages/Index.vue

<template>
  <Layout>

    <!-- Mise en page -->

    <!-- Sommaire -->

    <div class="column no-folio">
      <div class="section-title">
        Sommaire
      </div>
      <div class="column justify-end table-of-content">
        <span
          v-for="edge in $page.chapitres.edges.slice().reverse()"
          :key="`sommaire${edge.node.id}`"
        >
          <a :href="'#chapitres'+edge.node.id">{{ edge.node.titre }}</a>
        </span>
      </div>
    </div>

    <div v-for="edge in $page.chapitres.edges.slice().reverse()" :key="`chapitres${edge.node.id}`">
      <h2
      :id="`chapitres${edge.node.id}`"
      class="chapter-title canbreak"
      >{{edge.node.titre}}</h2>
      <VueMarkdown
      class="chapter-content justify"
      >{{edge.node.contenu}}
    </VueMarkdown>
    </div>

  </Layout>
</template>

<script>
import { Previewer } from 'pagedjs'
import VueMarkdown from 'vue-markdown'

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

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