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

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>

  2. 0

    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')
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search