[+] Title and subtitle

src/components/ZoteroPublication.vue

@@ -1,12 +1,14 @@
 <template>
     <div id="Publication">
-
+        <div id="title">{{d.title}}</div>
+        <div id="subtitle">By {{d.creators.map(it => it.firstName + ' ' + it.lastName).join(' & ')}}{{date ? ', ' + date.year() : ''}}</div>
     </div>
 </template>
 
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
 import {Prop} from "vue-property-decorator";
+import moment from "moment";
 
 export interface ZoteroLink
 {
@@ -25,22 +27,8 @@ export interface ZoteroCreator
     lastName: string
 }
 
-export interface ZoteroItem
+export interface ZoteroData
 {
-    key: string
-    version: number
-    library: {
-        type: string // 'user'
-        id: number
-        name: string
-        links: ZoteroLinks
-    }
-    meta: {
-        creatorSummary: string // Gui and Burton
-        parsedDate: string // 2021-12-09
-        numChildren: 1
-    }
-    data: {
     key: string
     itemType: string // 'document'
     title: string
@@ -57,13 +45,34 @@ export interface ZoteroItem
     libraryCatalog?: string
     rights?: string
     extra?: string
+}
+
+export interface ZoteroItem
+{
+    key: string
+    version: number
+    library: {
+        type: string // 'user'
+        id: number
+        name: string
+        links: ZoteroLinks
     }
+    meta: {
+        creatorSummary: string // Gui and Burton
+        parsedDate: string // 2021-12-09
+        numChildren: 1
+    }
+    data: ZoteroData
 }
 
 @Options({components: {}})
 export default class ZoteroPublicationView extends Vue
 {
     @Prop({required: true}) item!: ZoteroItem
+
+    get d(): ZoteroData { return this.item.data }
+
+    get date(): moment.Moment { return moment(this.d.date) }
 }
 </script>