Javascript 在Shopify商店中嵌入Vue组件

在产品页面中，我试图显示自定义Vue组件。为简洁起见，该组件根据给定的产品id显示Firebase数据库中的一些信息

我最初尝试将其作为Shopify应用程序，以便访问他们的API。我实现了OAuth，可以检索所需的信息。但是，实际上在存储区中包含组件是不成功的

在Shopify中包含Vue的最佳方式是什么

我尝试将脚本文件直接包含在模板文件、代码段中，并将它们包含在全局脚本标记中。但我尝试过的任何东西都无法渲染一个简单的组件

内部产品。液体：

{{message}}
var app=新的Vue({
el:“#应用程序”，
数据：{
消息：“你好，Vue！”
}
})

在Vue developer tools中，该组件显示在DOM中，但“Hello Vue！”消息没有按应有的方式显示

控制台中没有其他错误。这是最令人费解的

---

如果您能深入了解将Vue纳入Shopify的正确方法，我们将不胜感激。

Liquid文件将默认解析

{}

标记。所以你需要改变你的模板机制。以下是Shopify Liquid文件中的更新代码-

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

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

${message}
var app=新的Vue({
el:“#应用程序”，
数据：{
消息：“你好，Vue！”
},
分隔符：['${'，'}']
})

基本上，我添加了delimeters，vue将检查这些delimeters以查找模板，它们与Shopify解析不同，Shopify解析将导致Shopify不解析这些持有者。您可以在此处阅读有关vue delimeters的更多信息-

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

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