I have encountered an issue while attempting to integrate 3 custom modals into Shopify. Upon implementing them, I received the following error in the console (not originating from my Vue files, but rather from the Shopify template):
[Vue warn]: Error compiling template:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.
20 | </div>
21 | </div>
22 | </div><style data-shopify="">
| ^^^^^^^^^^^^^^^^^^^^^^^
23 |
The primary index shopify structure appears as follows:
<body class="template-{{ template | split: '.' | first }}">
<div id="app-vue">
<a class="in-page-link skip-link" href="#MainContent">{{ 'general.accessibility.skip_to_content' | t }}</a>
<div id="SearchDrawer" class="search-bar drawer--top" role="dialog" aria-modal="true" aria-label="{{ 'general.search.placeholder' | t }}">
<div class="search-bar__table">
<div class="search-bar__form-wrapper">
<form class="search" action="{{ routes.search_url }}" method="get" role="search">
<input class="search__input" type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}">
<button class="search-bar__submit btn--link" type="submit">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
</form>
</div>
<div class="search-bar__table-cell">
<button type="button" class="btn--link js-drawer-close">
{% include 'icon-close' %}
<span class="icon__fallback-text">{{ 'general.search.close' | t }}</span>
</button>
</div>
</div>
</div>
{%- if settings.enable_ajax -%}
{% include 'cart-popup' %}
{%- endif -%}
{% section 'header' %}
<div class="page-container" id="PageContainer">
<main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1">
{{ content_for_layout }}
</main>
{% section 'footer' %}
<div id="slideshow-info" class="visually-hidden" aria-hidden="true">
{{- 'sections.slideshow.navigation_instructions' | t -}}
</div>
</div>
<ul hidden>
<li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>
<li id="a11y-selection-message">{{ 'general.accessibility.selection_help' | t }}</li>
</ul>
<edit-subscription-modal></edit-subscription-modal>
<before-cancel-subscription-modal></before-cancel-subscription-modal>
<cancel-subscription-modal></cancel-subscription-modal>
</div>
Within the code snippet above, the app-vue id is utilized and the modals are included at the bottom:
<edit-subscription-modal></edit-subscription-modal>
<before-cancel-subscription-modal></before-cancel-subscription-modal>
<cancel-subscription-modal></cancel-subscription-modal>
Subsequently, I reference the modals in another file via this component:
<account shopify-id="{{ customer.id }}"></account>
To address the error and ensure that it doesn't read all Shopify tags, the modals must be appropriately defined within the index file.
Thank you!