Embed Vue component within Shopify store

Question

Within a product page, I am trying to display a custom Vue component. For brevity, the component displays some information from a Firebase database based on the given produc

Answer 1

Liquid files will by default parse {{ }} tags. So you need to change your templating mechanism. Below is updated code which works in Shopify Liquid files -

<div id="app">
  ${ message }
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    delimiters: ['${', '}']
  })
</script>

Basically, i have added delimeters which vue will check to find templates and they are different from Shopify Parsing which will result in shopify not parsing those holders. You can read up more about vue delimeters here - Link