Bug: petite-vue breaks Shopify theme editor when used with settings using "visible_if" #256
-
DescriptionWhen using petite-vue inside a Shopify theme, the theme editor crashes / fails to load as soon as the schema contains settings with Instead of loading correctly, Shopify shows an error modal saying the page cannot be loaded in the editor. This seems to happen specifically with the combination of:
Without So the issue appears to come from the interaction between petite-vue and Shopify’s theme editor behavior around conditional settings. Error shown in Shopify theme editor
Steps to reproduce
Example schema{
"name": "Test section",
"settings": [
{
"type": "checkbox",
"id": "show_extra",
"label": "Show extra fields",
"default": false
},
{
"type": "text",
"id": "extra_text",
"label": "Extra text",
"visible_if": "{{ section.settings.show_extra }}"
}
]
}Expected behaviorThe Shopify theme editor should load normally, even when petite-vue is present and the schema contains Actual behaviorThe theme editor fails to load and displays an incompatibility / page loading error. Notes
Environment
Additional contextI can reproduce this consistently on a Shopify theme using petite-vue for frontend interactivity. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
Ok I fix it like that: Add <body
v-scope
data-page-ty |
Beta Was this translation helpful? Give feedback.
Ok I fix it like that:
Add
v-scopeto<body>