You can easily embed JSON in your Vue with a new double-encoding method. If you use Vue with a server-side application like Laravel, chances are that you’ve seeded Vue with some JSON data or user-generated content (UGC) that looks something like the following:


    <div id="">
            :example-data="{{ json_encode([
                'wrestler_name' => '"Mercenary" Keith Anderson'
            ]) }}"


Unfortunately, if your data has HTML entities, your Vue application will get stopped dead in its tracks.

As of Laravel 5.5.29, Taylor Otwell introduced a doubleEncode() method to the Blade compiler, which solves this issue easily.

Adam Walthan Tweeted about how to use double-encoding with this example:

Fortunately, it’s easy to remedy by adding the new Blade::doubleEncode() method in your AppServiceProvider::boot() method:

class AppServiceProvider extends ServiceProvider
     * Bootstrap any application services.
     * @return void
    public function boot()

The original <example-component> example I shared would now look like the following with double-encoding:

- Screen Shot 2018 01 28 at 9 - Safely Seed Your Vue Components with Blade Double-encoding

I’ve fought with seeding Vue components with JSON data, and it’s nice that Laravel can automatically make this stuff so much easier to deal with now!

Source link


Please enter your comment!
Please enter your name here