Display data that is passed to our Blade views by enclosing the variable in curly braces.

The following route is given below:

We display the contents of the name variable like:

  • Blade {{ }} statements are sent through PHPs htmlspecialchars function. It prevents XSS attacks.

We can put any PHP code where we wish to insert a Blade echo statement:

Displaying Unescaped Data

Blade {{ }} statements are automatically sent through PHPs htmlspecialchars function to prevent XSS attacks.

If we need to escape our data, we have to  use the following syntax:

Rendering JSON

We pass an array to our view with the intention of rendering (providing) it as JSON to initialize a JavaScript variable.

For example:

However, instead of manually calling json_encode, we can use the @json Blade directive. The @json directive accepts the same arguments as PHP`s json_encode function do: 

The @json directive is also useful for seeding Vue components or data-* attributes:

  • Using the @json in element attributes requires to be surrounded by single quotes.

HTML Entity Encoding

Blade ( and the Laravel e helper ) will double encode HTML entities. If we would like to disable double encoding, call the Blade::withoutDoubleEncoding() method from the boot method of our AppServiceProvider:

Blade & JavaScript Frameworks

JavaScript frameworks also use “curly” braces, which indicate that the given expression is displayed in the browser.

We use @ symbol to inform the Blade, providing engine an expression that should remain untouched.

For example:

In the above example, @ (at the rate) symbol will be removed by the Blade.

However, {{ name }} expression will not be touched by the Blade engine.

The @verbatim Directive

If we are displaying JavaScript variables in a large portion of our template,

we wrap the HTML in the @verbatim Directive. It is because we do not need to prefix each Blade echo statement within the @ symbol:

For example:

Pin It on Pinterest

Share This