CODEWITHSUNDEEP
vue.jsshopifyliquid
Kevin Compton
Kevin Compton

Reputation: 746

Using vue.js in Shopify liquid templates

This should be simple but despite searching I was unable to find any solution to this. How do you use vue template tags within a liquid file? Since both Vue and liquid use the same curly brackets, I'm unable to render any of my view data:

<img src="{{ product.featured_image }}" />

results in:

<img src>

There are 36 products in my parent view component.

When I try to use custom delimiters:

new Vue({
  delimiters: ['@{{', '}}'],

It won't parse with Vue:

  GET https://inkkas.com/collections/@ 404 (Not Found)

UPDATE: I'm able to access Vue data with v-bind: but I still need to be able to use delimiters also.

Upvotes: 15

Views: 8757

Answers (2)

WebDev-SysAdmin
WebDev-SysAdmin

Reputation: 369

Adding on a bit from where Kevin Compton left off, this is where you put the "delimiters" parameter:

const ConditionalRendering = {
  data() {
    return {
      seen: true,
      someMessage: "My message"
    }
  },

  delimiters: ['${', '}']
  
}


Vue.createApp(ConditionalRendering).mount('#conditional-rendering')

Upvotes: 3

Kevin Compton
Kevin Compton

Reputation: 746

Apparently with Shopify, you can't put these delimiters in the tag attributes at all so for those use v-bind: (the shorthand won't work). Also you have to use a single curly brace for your custom delimiter or it will still try to parse with liquid, for example:

delimiters: ['${', '}']

will work with:

<span class="title">${ product.title }</span>

Upvotes: 19

Related Questions