created MainContentLayout slot template

src/components/Content/LocorumItem.vue

@@ -0,0 +1,41 @@
+<template>
+  <article class="locorum item">
+    <header>
+      <h1>
+        <a
+          :href="item.url"
+          @click.prevent="onclick"
+          @keyup.enter="onclick"
+          v-html="item.title"
+        />
+      </h1>
+    </header>
+  </article>
+</template>
+
+<script>
+export default {
+  name: 'LocorumItem',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  data: () => ({
+
+  }),
+  methods: {
+    onclick () {
+      console.log('clicked on locorum item', this.item)
+      // this.$router.push({
+      //   name: `locorumItem`,
+      //   query: { id: this.item.uuid }
+      // })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/Layouts/MainContentLayout.vue

@@ -0,0 +1,34 @@
+<template>
+  <div
+    :id="id"
+    class="full-width row"
+  >
+    <header class="col-3">
+      <slot name="header" />
+    </header>
+
+    <section class="col-6">
+      <slot />
+    </section>
+
+    <nav class="col-3">
+      <slot name="nav" />
+    </nav>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MainContentLayout',
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/nav/HeaderMenu.vue

@@ -5,9 +5,9 @@
       <li>
         <span>Index</span>
         <ul>
-          <li><router-link to="/nominum">Nominum</router-link></li>
-          <li><router-link to="/locorum">Locorum</router-link></li>
-          <li><router-link to="/operum">Operum</router-link></li>
+          <li><router-link to="/nominum">Personnes</router-link></li>
+          <li><router-link to="/locorum">Lieux</router-link></li>
+          <li><router-link to="/operum">Œuvres</router-link></li>
         </ul>
       </li>
       <li><router-link to="/bibliographie">Bibliographie</router-link></li>

src/pages/Corpus.vue

@@ -1,29 +1,33 @@
 <template>
-  <div
-    id="corpus"
-    class="full-width"
-  >
-    <h1>Corpus</h1>
-    <span v-if="!items.length">Loading ...</span>
-    <div v-else class="item-list">
-      <ul>
-        <li v-for="item in items" :key="item.url">
-          <CorpusItem :item="item" />
-        </li>
-      </ul>
-    </div>
-  </div>
+  <MainContentLayout id="corpus">
+    <template v-slot:header>
+      <h1>Corpus</h1>
+      <span v-if="!items.length">Loading ...</span>
+    </template>
+
+    <ul v-if="items.length" class="item-list">
+      <li v-for="item in items" :key="item.url">
+        <CorpusItem :item="item" />
+      </li>
+    </ul>
+
+    <template v-slot:nav>
+      nav
+    </template>
+  </MainContentLayout>
 </template>
 
 <script>
 
 import CorpusItem from '../components/Content/CorpusItem'
+import MainContentLayout from '../components/Layouts/MainContentLayout'
 import { mapState, mapActions } from 'vuex'
 
 export default {
   name: 'Corpus',
   components: {
-    CorpusItem
+    CorpusItem,
+    MainContentLayout
   },
   data: () => ({
     // items: []

src/pages/Item.vue

@@ -1,26 +1,30 @@
 <template>
-  <transition name="fade" appear>
-    <span v-if="!loaded">Loading...</span>
-    <article v-else class="item row">
-      <header class="col-3">
-        <h1>
-          {{ item.title }}
-        </h1>
-      </header>
-      <section v-html="item.tei" class="col-6"/>
-      <section class="col-3">
-        tree
-      </section>
-    </article>
-  </transition>
+  <MainContentLayout id="text" class="text">
+    <template v-slot:header>
+      <h1>
+        {{ item.title }}
+      </h1>
+      <span v-if="!loaded">Loading...</span>
+    </template>
+
+    <section v-html="item.tei" class="col-6"/>
+
+    <template v-slot:nav>
+      tree
+    </template>
+  </MainContentLayout>
 </template>
 
 <script>
 
 import { REST } from 'api/rest-axios'
+import MainContentLayout from '../components/Layouts/MainContentLayout'
 
 export default {
   name: 'Item',
+  components: {
+    MainContentLayout
+  },
   props: {
     uuid: {
       type: String,

src/pages/Locorum.vue

@@ -1,38 +1,45 @@
 <template>
-  <div
-    id="locorum"
-    class="full-width"
-  >
-    <h1>Locorum</h1>
-    <span v-if="!items.length">Loading ...</span>
-  </div>
+  <MainContentLayout id="locorum">
+    <template v-slot:header>
+      <h1>Lieux</h1>
+      <span v-if="!items.length">Loading ...</span>
+    </template>
+
+    <ul v-if="items.length" class="item-list">
+      <li v-for="item in items" :key="item.url">
+        <LocorumItem :item="item" />
+      </li>
+    </ul>
+
+    <template v-slot:nav>
+      nav
+    </template>
+
+  </MainContentLayout>
 </template>
 
 <script>
 
 import { REST } from 'api/rest-axios'
+import MainContentLayout from '../components/Layouts/MainContentLayout'
+import LocorumItem from '../components/Content/LocorumItem'
 
 export default {
   name: 'Locorum',
+  components: {
+    LocorumItem,
+    MainContentLayout
+  },
   data: () => ({
     items: []
-
   }),
   beforeCreate () {
-    // items/gdpLeMaire1685T01BodyFr01.003.016
-    // texts/gdpSauval1724
     REST.get(`/indexLocorum`, {})
       .then(({ data }) => {
         console.log('locorum REST: data', data)
-        // if(data.length){
-        //   commit('setItems',data)
-        //   // console.log('items.length', this.items.length);
-        //   if(state.infiniteLoadingState)
-        //     state.infiniteLoadingState.loaded()
-        // }else{
-        //   if(state.infiniteLoadingState)
-        //     state.infiniteLoadingState.complete()
-        // }
+        if (data.content.length) {
+          this.items = data.content
+        }
       })
       .catch((error) => {
         console.warn('Issue with locorum', error)

src/pages/Nominum.vue

@@ -1,29 +1,33 @@
 <template>
-  <div
-    id="nominum"
-    class="full-width"
-  >
-    <h1>Nominum</h1>
-    <span v-if="!items.length">Loading ...</span>
-    <div v-else class="item-list">
-      <ul>
-        <li v-for="item in items" :key="item.url">
-          <NominumItem :item="item" />
-        </li>
-      </ul>
-    </div>
-  </div>
+  <MainContentLayout id="nominum">
+    <template v-slot:header>
+      <h1>Personnes</h1>
+      <span v-if="!items.length">Loading ...</span>
+    </template>
+
+    <ul v-if="items.length" class="item-list">
+      <li v-for="item in items" :key="item.url">
+        <NominumItem :item="item" />
+      </li>
+    </ul>
+
+    <template v-slot:nav>
+      nav
+    </template>
+  </MainContentLayout>
 </template>
 
 <script>
 
 import { REST } from 'api/rest-axios'
+import MainContentLayout from '../components/Layouts/MainContentLayout'
 import NominumItem from '../components/Content/NominumItem'
 
 export default {
   name: 'Nominum',
   components: {
-    NominumItem
+    NominumItem,
+    MainContentLayout
   },
   data: () => ({
     items: []

src/pages/Operum.vue

@@ -1,37 +1,38 @@
 <template>
-  <div
-    id="operum"
-    class="full-width"
-  >
-    <h1>Operum</h1>
-    <span v-if="!items.length">Loading ...</span>
-    <div v-else class="item-list">
-      <ul>
-        <li v-for="item in items" :key="item.url">
-          <OperumItem :item="item" />
-        </li>
-      </ul>
-    </div>
-  </div>
+  <MainContentLayout id="operum">
+    <template v-slot:header>
+      <h1>Œuvres</h1>
+      <span v-if="!items.length">Loading ...</span>
+    </template>
+
+    <ul v-if="items.length" class="item-list">
+      <li v-for="item in items" :key="item.url">
+        <OperumItem :item="item" />
+      </li>
+    </ul>
+
+    <template v-slot:nav>
+      nav
+    </template>
+  </MainContentLayout>
 </template>
 
 <script>
 
 import { REST } from 'api/rest-axios'
+import MainContentLayout from '../components/Layouts/MainContentLayout'
 import OperumItem from '../components/Content/OperumItem'
 
 export default {
   name: 'Operum',
   components: {
-    OperumItem
+    OperumItem,
+    MainContentLayout
   },
   data: () => ({
     items: []
-
   }),
   beforeCreate () {
-    // items/gdpLeMaire1685T01BodyFr01.003.016
-    // texts/gdpSauval1724
     REST.get(`/indexOperum`, {})
       .then(({ data }) => {
         console.log('operum REST: data', data)