Using this in Vue JS

[bradleyw92]

I have a Vue JS component that loads data through an API which includes latitude and longitude.

I've successfully loaded the latitude and longitude data on the component so all I would need to do is include it on the below function inside the center option.

I was hoping I'd be able to embed the following on a Vue component:

{{ craft.maps.img({
                        width: 1400,
                        height: 1400,
                        center: 'Maidstone, UK',
                    })
}}

But comes up with the following error:

Property or method "craft" is not defined on the instance but referenced during render.

Please can you advise on how I would include one of the maps options inside a Vue component?

[alexjcollins]

Depends on how you have things set up but could you set craft.maps.img() inside twig and then pass the URL it creates to your Vue component?

e.g.

{% set mapUrl = craft.maps.img({
    width: 1400,
    height: 1400,
    center: 'Maidstone, UK',
}) %}

Then:

<map map-url="{{ mapUrl }}"></map>

[bradleyw92]

So that’s what I’ve got currently but problem I have is inside the Vue the component is my two values for lat and long which are coming from an Axios request so it’s a case of seeing how we pass those values back to the main twig file inside the centre option.

…

On Thu, 5 Aug 2021 at 12:42, Alex Collins ***@***.***> wrote: Depends on how you have things set up but could you set craft.maps.img() inside twig and then pass the URL it creates to your Vue component? e.g. {% set mapUrl = craft.maps.img({ width: 1400, height: 1400, center: 'Maidstone, UK', }) %} Then: <map map-url="{{ mapUrl }}"></map> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#319 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANIBWLEXTSGHWE2YW5UQRQ3T3J2MBANCNFSM5BTR7RSQ> .