From 98d7cd749dd11ea4d3dee96e2f04c7b97ac87899 Mon Sep 17 00:00:00 2001
From: Sergej Samsonenko <contact@sergej.codes>
Date: Sat, 17 Apr 2021 14:14:17 +0200
Subject: [PATCH] fix: render vue components in theme editor section

---
 src/main.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/main.js b/src/main.js
index 91351436..2fd73b89 100644
--- a/src/main.js
+++ b/src/main.js
@@ -86,4 +86,23 @@ Vue.prototype.$axios = axios
 new Vue({
   el: '#app',
   store
+})
+
+/**
+ * fix: properly render vue components inside sections on user insert in the theme editor
+ * add the 'vue' keyword to the section's wrapper classes e.g.:
+ * {% schema %}
+ * {
+ *   "class": "shopify-section-vue"
+ * }
+ * {% endschema %}
+ */
+// eslint-disable-next-line
+Shopify.designMode && document.addEventListener('shopify:section:load', (event) => {
+  if(event.target.classList.value.includes('vue')) {
+    new Vue({
+      el: event.target,
+      store
+    })
+  }
 })
\ No newline at end of file