[FIXED] Why does Vue.js not work in Shopify theme?

Issue

I want to use Vue.js in my shopify theme. so added this code in theme. But it's not working. showing no results now! I'm not sure what is the issue. Could someone help me to fix this simple issue? Thank you

note: I have been created a test.html and copy pasted below code. but It was working correctly on simple html file. but why it's not working on shopify?

<script src="https://unpkg.com/vue"></script>

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

<script>
  console.log('run-vue');
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

Solution

TLDR: Vue is using template syntax that is too similar to Liquid - you need to use {% raw %} tags.

You can definitely use Vue or any other arbitrary framework on a Shopify store - All Shopify does is provide you with a templating language that you can use to access store-related information. You can load any arbitrary JS (and I have seen a lot of arbitrary javascript loaded into various stores!) The trick though is that lots of templating languages use similar delimiters, so if you use something that also uses {{}} or {%%} syntax you need to tell Shopify not to parse those sections server-side.

In your case, the mounting point would just need to be updated to:

{% raw %}
  <div id="app">
    {{ message }}
  </div>
{% endraw %}

Answered By - Dave B

Answer Checked By - Candace Johnson (PHPFixing Volunteer)