How to use Vue JS on an particular page 🙏

[Elkaroui]

Hello,
it's possible to add a script under a specific page, like

product.liquid

product.liquid
..
...
...
export default {
  data () {
    return {
      name: 'shopify-theme-lab',
  },
  
  mounted () {
    axios
      .get(`/products/${product_handle}.json`)
      .then(response => (this.name = response))
  },

  methods:  {
  },
}

When I try to do that the page become blank and nothing showing, I need you help 🙏🙏🙏🙏

[Elkaroui]

I have another issue, the Shopify liquid didn't recognize inside mixins, always returned string,

I added a variable to the product.liquid

 let product_handle = '{{product.handle}}';

than I add it inside global.mixin.js

  mounted () {
    axios
      .get(`/products/${product_handle}.json`)
      .then(response => (this.productjson = response))
  },

I manage to get the data back but I always get an error message and I don't know how to fix it

error  'product_handle' is not defined  no-undef

[brenomzy]

Yep, I have the same problem.
I want to add some code to the product page to make some things reactive, like the product price.

The code would have to be in a script tag and use liquid inside it, but I cannot make it work.

Something like this but without creating a new vue instance, is it possible?

[sergejcodes]

First, that's not a good practice and second that doesn't work. Webpack can't see those script tags. Here's a basic example how one can achieve reactivity:

1. Create a component in src/vue/components/render/demo.vue:

<template>
  <div>
    {{ currentVariantId }}
  </div>
</template>

<script>
export default {
  name: 'demoComponent',
  props: {
    currentVariantId: {
      type: String,
      required: true
    }
  }
}
</script>

2. Add the component to your liquid file and pass the data to the component:

<demo-component current-variant-id="{{ some-liquid-data }}"></demo-component>

---

Here's another example but based on renderless-components:

• Vue file
• Liquid template

[brenomzy]

Hey! Thanks for pointing me the right way.
Still having a lot of trouble make things reactive, things that I want to do include:

• Updating the product price on variant select
• Changing the image to the corresponding variant on variant select

Can you give me some ideas of how to achieve that?
What you showed me worked really well with using liquid inside props, but could not make any of it reactive.

Thanks again!

[Elkaroui]

Hi, @brenomzy
I was working for a solution about that too, you can try to do it with JS, I made an example on codepen, you can check it out, it works perfectly for me.

https://codepen.io/Elkazi/pen/wvJeErg