What is the @ Symbol in a Laravel Spark Vue.js Template?

Question

In Laravel Spark's template files, you'll occasionally see something like this

<span class="help-block" v-show="form.errors.has('name')">
    @{{ form.errors.get('name') }}
</span>

That is, a span that's conditionally toggled visible/invisible based on the form's current errors.

I understand this part

{{ form.errors.get('name') }}

It's a Vue.js template that will display the string returned by form.errors.get('name'). However -- what's the @ symbol in front of the template for? I know, as an attribute, @ is a shorthand for v-on. However,

v-on{{ form.errors.get('name') }}

makes even less sense to me, so I'm guessing the @ symbol does something else here. Is this a Vue.js thing? A Laravel Spark thing? Something else?

If It's blade file it says laravel to ignore it because It's part of Vue template. Basically Vue and Laravel Blade use same thing for templating and binding dynamic values and expressions - mustaches `{{ }}` — Belmin Bedak, Jun 25 '17 at 20:45
@BelminBedak D'oh -- face palm. I got a bit too wrapped up in Vue and forgot where I was :) If you want to write that up as an answer I'm happy to up vote and mark as best. — Alana Storm, Jun 25 '17 at 20:47

score 3 · Accepted Answer · edited Jul 15 '22 at 02:56

3

It's because Vue and Laravel Blade use the same syntax for binding dynamic values and expressions.

@ into the mustaches expression (in blade file) means that Laravel should ignore it so Vue will take care of It.

Note: If you want to use another templating expression for Vue, check delimiters section in docs - https://v2.vuejs.org/v2/api/#delimiters

edited Jul 15 '22 at 02:56

tony19

125,647
18
229
307

answered Jun 25 '17 at 20:49

Belmin Bedak

9,011
2
40
44

score 1 · Answer 2 · answered Jun 25 '17 at 20:53

1

@ symbol its a Laravel thing to inform the Blade rendering engine an expression should remain untouched. The @ is used in Laravel blade templates.

answered Jun 25 '17 at 20:53

Leo

7,274
5
26
48

What is the @ Symbol in a Laravel Spark Vue.js Template?

2 Answers2