Shopify with Vue.js

Question

I'm trying to add 3 custom modals to Shopify. But when I do that I get this error in my console (it's not in my vue files, it's something 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 main index shopify looks like this:

<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>

The code above is using the app-vue id, and at the bottom I've added the modals:

 <edit-subscription-modal></edit-subscription-modal>
 <before-cancel-subscription-modal></before-cancel-subscription-modal>
 <cancel-subscription-modal></cancel-subscription-modal>

Then In another file I call the modals via this component:

<account shopify-id="{{ customer.id }}"></account>

The modals need to be defined in the index file. How can I fix the error and make sure it's not reading all shopify tags?

Thanks!

Answer 1

If you link external sections or snippets inside a vue-app container you should make sure that they don't contain any "style", "script" or other tags which are not supported by the vue template syntax.

There is another approach to integrate vue into shopify themes. You may use precompiled single file components. I wrote an article about this with ready to use examples. If you are interested please check this out: Vue.js components in Shopify themes

Shopify with Vue.js

Question

1 answers

solution1
0 2020-10-03 10:19:13

Shopify with Vue.js

Question

1 answers

solution1 0 2020-10-03 10:19:13

solution1
0 2020-10-03 10:19:13