inject home html content into vue componenent MainContent

web/themes/custom/materiotheme/assets/scripts/main.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import store from 'vuejs/store'
 import VUserBlock from 'vuejs/components/User/UserBlock'
-import VTestContent from 'vuejs/components/Content/Test'
+import VMainContent from 'vuejs/components/Content/MainContent'
 
 import { mapState } from 'vuex'
 
@@ -12,7 +12,7 @@ import 'theme/assets/styles/main.scss'
 
   var MaterioTheme = function(){
 
-    var v_user_block, v_test_content;
+    var v_user_block, v_main_content;
     // var _is_front = drupalSettings.path.isFront;
 
 
@@ -29,7 +29,7 @@ import 'theme/assets/styles/main.scss'
 
     function initVues(){
       initUserVBlock()
-      // initTestVContent()
+      initVMainContent()
     }
 
     function initUserVBlock(){
@@ -81,11 +81,14 @@ import 'theme/assets/styles/main.scss'
       console.log('initUserVBlock', v_user_block);
     }
 
-    function initTestVContent(){
-      v_test_content = new Vue({
+    function initVMainContent(){
+      let $main_content = document.querySelector('#main-content')
+      console.log('main-content', $main_content);
+      let main_html = $main_content.innerHTML
+      v_main_content = new Vue({
         store,
-        render: h => h(VTestContent)
-      }).$mount('#block-pagetitle')
+        render: h => h(VMainContent, {props:{html:main_html}})
+      }).$mount('#main-content')
       // console.log('initTestVContent', v_test_content);
     }
 

web/themes/custom/materiotheme/templates/layout/page.html.twig

@@ -59,14 +59,14 @@
     </div>
   </header>
 
-  <main role="main">  
+  <main role="main">
     {% if page.content.messages %}
       <aside class="messages">
         {{ page.content.messages }}
       </aside>
     {% endif %}
 
-    <div class="layout-content">
+    <div id="main-content">
       {{ page.content|without('messages') }}
     </div>{# /.layout-content #}
   </main>

web/themes/custom/materiotheme/vuejs/components/Content/Test.vue → web/themes/custom/materiotheme/vuejs/components/Content/MainContent.vue

@@ -1,14 +1,12 @@
 <template lang="html">
-  <div id="block-pagetitle" class="">
-    <h1>Test Shared Store ( logged in: {{ isloggedin }} )</h1>
-    <h2 v-if="isloggedin">Shared store is working</h2>
-  </div>
+  <div id="main-content" v-html="html"></div>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex'
 
 export default {
+  props:['html'],
   computed: {
     ...mapState({
       token: state => state.User.token,
@@ -19,4 +17,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 </style>