Question 11951 in Shopify Question posted in
The Shopify help center can be found here.

Why does Vue.js not work in Shopify theme?

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

2

Answers


  1. 0

    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 %}
    Login or Signup to reply.
  2. 0

    In Vue 3 you can use custom delimiters:

    Vue.createApp({ delimiters: ["${", "}"] })

    Then in the template:

    <div>${this.someVueData}</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search