loaded materials form solr with jsonapi, and display them

web/themes/custom/materiotheme/vuejs/components/Content/Base.vue

@@ -1,10 +1,13 @@
 <template>
   <div id="Base">
     <h1 class="page-title">{{ pagetitle }}</h1>
-    <aside class="search-info">
-      {{ searchinfos }}
-    </aside>
-    <div class="results">
+    <div class="loading" v-if="!items.length">
+      <span>Loading ...</span>
+    </div>
+    <div class="cards-list" v-else>
+      <aside class="search-info">
+        {{ searchinfos }}
+      </aside>
       <ul>
         <li v-for="item in items" v-bind:key="item.nid">
           <Card :item="item"/>

web/themes/custom/materiotheme/vuejs/components/Content/Card.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="card">
-    <h1>{{ item.title }}</h1>
+    <header>
+      <h1>{{ item.title }}</h1>
+      <h4>{{ item.description }}</h4>
+    </header>
+    <section class=images>
+      <img class="images" v-for="img in item.images" :src="img.url" :title="img.title"/>
+    </section>
   </div>
 </template>
 
@@ -17,4 +23,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 </style>

web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

@@ -68,8 +68,12 @@ export default {
   mounted(){
     // console.log('SearchForm mounted');
     Drupal.attachBehaviors(this.$el);
+    // get the search input
+    let $input = this.$el.querySelector('#edit-search')
+    // focus on input
+    $input.focus()
     // Catch the jquery ui events for autocmplete widget
-    jQuery(this.$el.querySelector('#edit-search')).on('autocompleteselect', this.onAutoCompleteSelect);
+    jQuery($input).on('autocompleteselect', this.onAutoCompleteSelect);
   },
   render(h) {
     // console.log('searchForm render');