I was trying to read out the asset url and the alt text of the company logo. Then i wanted to pass those values into the vue component.

    :company-logo-url="{{ asset:company.company_logo }}{{ url }}{{ /asset:company.company_logo }}"
    :company-logo-alt="{{ asset:company.company_logo }}{{ alt }}{{ /asset:company.company_logo }}"
    :company-logo-small-url="{{ company.company_logo_small }}"
    :company-logo-small-alt="{{ asset:company.company_logo_small }}{{ alt }}{{ /asset:company.company_logo }}"

Its working fine, but vue is giving me the following error in the console:

[Vue warn]: Error compiling template:

company-logo-small-alt="{{ /asset:company.company_logo }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

1  |  <div id="app">
2  |            <navbar-component company-logo-url="/assets/img/company-logo.svg" company-logo-alt="Company Logo" company-logo-small-url="/assets/img/company-logo-stencil.svg" company-logo-small-alt="{{ /asset:company.company_logo }}"></navbar-component>
   |                                                                                                                                                                                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
3  |  <project-slider-component></project-slider-component>
4  |  

(found in <Root>)

Do you have an idea? Maybe i could get out the asset object and pass it as JSON or something?


Found a solution using FETCH addon:

<navbar-component :company="{{ fetch global='company' }}"></navbar-component>