Adding phone prefix to phone number variable in my component

You could just put the +34 in your span

<span> +34 {{ globals.phoneNumber }}</span>

If you want something more sophisticated have a look at

https://github.com/EducationLink/vue-tel-input

So I decided to make a vue filter like this:

Vue.filter('phonePrefix', function (value) {
    return value ? '+34${value}' : null;
})

And added this to my template:

<a class="header_small_phone_number" :href="tel:{{ APP.globals.appBookingPhone | phonePrefix}} ">{{ APP.globals.appBookingPhone }}</a>

However when I compile I get this error:

 - invalid expression: Unexpected token : in

    tel: +34{{ APP.globals.appBookingPhone | phonePrefix}}

  Raw expression: :href="tel: +34{{ APP.globals.appBookingPhone | phonePrefix}} "

Also tried this but it doesn't work either:

<a class="header_small_phone_number" :href="'tel:${APP.globals.appBookingPhone | phonePrefix}'">{{ APP.globals.appBookingPhone }}</a>

@Gabotronix did you try my solution of just putting your +34 in your template?

You originally said

I don't want to create ANOTHER variable just for this and concatenate the strings

But you have setup a filter to do just this...

I just tried yours:

<a class="header_small_phone_number" :href="tel:+34{{ APP.globals.appBookingPhone }}">{{ APP.globals.appBookingPhone }}</a>

but I'm still getting a compilling error

You are trying to bind href attribute which means the contents are parsed as JavaScript so try

<a class="header_small_phone_number" :href="'tel: +34' + {{ APP.globals.appBookingPhone }}">
  {{ APP.globals.appBookingPhone }}
</a>

Please remember when you ask a question to much sure you provide the correct detail to prevent getting mislead. Your original post referenced a span but your actual question was about an href attribute on a link.

Yes that was my fault, so now Visual Studio is showing me a syntax error:

https://i.imgur.com/0aIiGb3.png

why is this happening?

try

:href="tel:+34 {{APP.globals.appBookingPhone}}"

or maybe it needs to be

:href="tel:+34 ${APP.globals.appBookingPhone}"

As far as I'm aware, you can't use curly brackets curly brackets inside of attributes. This would work instead:

:href="`tel:+34 ${APP.globals.appBookingPhone}`"

Edit: By curly brackets, I mean the double curly brackets.

To be honest in reflection of your entire problem just create a computed property

computed: {
   phoneLink: function(){ 
      return 'tel:+34' + APP.globals.appBookingPhone;
   }

...

<a class="header_small_phone_number" :href="phoneLink" ...

Depending on where your APP variable has been declared you might need to use this.APP