Script Tags

[LeoSonnekus]

Hey Love the starter so far but I'm trying to add <script> tags on product sections, mostly the ones used in Dawn, that use some liquid code as well as Javascript or the script defining some JSON data

<script type="application/ld+json"> { "@context": "http://schema.org/",

on this section - main-product.liquid

Is this possible? do I need to define this with Vue or some other method?

My console is returning this error?

runtime-core.esm-bundler.js:6642 [Vue warn]: Template compilation error: Tags with side effect (<script> and <style>) are ignored in client component templates.

Apologies if this is a silly question this is my first time using a build tool for themes, appreciate the help in advance :)

[sergejcodes]

Use Vue's component tag and pass script to the is prop. Vue removes regular script tags.

<component is="script">
   <!-- your js code -->
</componet>

[tentree-development]

I want to pass menu items to vue component is it possible to do? Using component didn't work in my case

` <script >

    const subMenu = [
        {% for link in linklists.main-menu.links %}         
            {% if link.url == parent_name %}            
                {% for child_link in link.links %}            
                    {% for sub_child_link in child_link.links %}                
                        { 
                            name: "{{ sub_child_link.title }}",
                            link: "{{ sub_child_link.url }}"
                        },
                    {% endfor %}
                {% endfor %}            
            {% endif %}
        {% endfor %}
    ];

    
</script>

<clp-list
    algolia-app-id="{{ algolia_app_id }}" 
    algolia-api-key="{{ algolia_api_key }}" 
    algolia-index-name="{{ algolia_index_name }}" 
    product-type="womens"
    collection-handle="{{ collection_url }}"
    colors="{{ product_color }}"
    main-color="{{ colorGroupsRaw }}"
    :sub-menu="subMenu"
></clp-clist>`

[tentree-development]

It works on the local environment but it doesn't work once I 'npm run deploy'

[tentree-development]

I guess menu can't be in the vue component with the current set up