full running

packages/nuxt/pages/post/_.vue

@@ -39,12 +39,17 @@
         </nuxt-link>
       </span>
     </section>
+
+    <footer v-if="remark42settings">
+      <div ref="remark42" />
+    </footer>
   </section>
 </template>
 
 <script lang="ts">
 import { Vue, Component } from 'nuxt-property-decorator'
 import { api, THEME } from '~/assets/global'
+import '~/assets/remark42'
 
 @Component<PostPage>({
   async fetch() {
@@ -60,6 +65,23 @@ import { api, THEME } from '~/assets/global'
     }
 
     this.post = r
+
+    setTimeout(() => {
+      if (process.browser) {
+        if (window.REMARK42) {
+          this.initRemark42()
+        } else {
+          window.addEventListener('REMARK42::ready', () => {
+            this.initRemark42()
+          })
+        }
+      }
+    }, 1000)
+  },
+  beforeDestroy() {
+    if (this.remark42Instance) {
+      this.remark42Instance.destroy()
+    }
   },
 })
 export default class PostPage extends Vue {
@@ -73,6 +95,23 @@ export default class PostPage extends Vue {
   } | null = null
 
   theme = THEME
+
+  remark42settings = THEME.comment?.remark42 || null
+  remark42Instance: any = null
+
+  initRemark42() {
+    if (process.browser && this.remark42settings && window.REMARK42) {
+      if (this.remark42Instance) {
+        this.remark42Instance.destroy()
+      }
+
+      this.remark42Instance = window.REMARK42.createInstance({
+        node: this.$refs.remark42 as HTMLElement,
+        host: this.remark42settings.host,
+        site_id: this.remark42settings.siteId,
+      })
+    }
+  }
 }
 </script>