I am integrating Vue.js with Shopify, and I am trying to pass objects from Liquid into a Vue component as a prop. An example scenario would involve using the product object in Liquid from Shopify and converting it directly into an object within Vue. Ideally, I would like to achieve this by including the following code:
<product-tile product='{{ product | json }}'></product-tile>It's important to note that the curly braces used here are from Liquid and not Vue, and delimiters specified in Vue documentation are being utilized. Currently, my workaround involves storing the necessary data in hidden input fields which are then accessed from the DOM after the component is mounted. However, having the ability to directly pass the Liquid content into the Vue component would be a much cleaner solution.
The reason for encountering errors with the above code is because Vue seems to have issues when a JSON string is passed as a prop in this manner. The specific error message reported is:
Template compilation error: Unquoted attribute value cannot contain U+0022 ("), U+0027 ('), U+003C (<), U+003D (=), and U+0060 (`).
Are there alternative methods to achieve this without resorting to my current workaround?