Hiding JSON-formatted data in the DOM on a laravel vue.js project

Hi good people, I am using Laravel and Vue.js to create a project.

You can see that I am getting categories from Laravel and injecting the data to Vue.js component.

My blade file @extends('layouts.app')

@section('content') <!-- some more code here to process categories--!> @endsection

Generated html when i view page source

<!-- header stuff -->

    <main class="py-4">
        <index-vue inline-template :categories="[{&quot;id&quot;:1,&quot;name&quot;:&quot;Clothes&quot;,&quot;slug&quot;:&quot;clothes&quot;,&quot;created_at&quot;:&quot;2020-07-17T08:02:04.000000Z&quot;,&quot;updated_at&quot;:&quot;2020-07-17T08:02:04.000000Z&quot;,&quot;category_count&quot;:660},{&quot;id&quot;:2,&quot;name&quot;:&quot;Shoes&quot;,&quot;slug&quot;:&quot;shoes&quot;,&quot;created_at&quot;:&quot;2020-07-17T08:02:04.000000Z&quot;,&quot;updated_at&quot;:&quot;2020-07-17T08:02:04.000000Z&quot;,&quot;category_count&quot;:660},{&quot;id&quot;:3,&quot;name&quot;:&quot;Fashion&quot;,&quot;slug&quot;:&quot;fashion&quot;,&quot;created_at&quot;:&quot;2020-07-17T08:02:04.000000Z&quot;,&quot;updated_at&quot;:&quot;2020-07-17T08:02:04.000000Z&quot;,&quot;category_count&quot;:660},{&quot;id&quot;:4,&quot;name&quot;:&quot;Rings&quot;,&quot;slug&quot;:&quot;rings&quot;,&quot;created_at&quot;:&quot;2020-07-17T08:02:04.000000Z&quot;,&quot;updated_at&quot;:&quot;2020-07-17T08:02:04.000000Z&quot;,&quot;category_count&quot;:660},{&quot;id&quot;:5,&quot;name&quot;:&quot;Shoes&quot;,&quot;slug&quot;:&quot;shoes&quot;,&quot;created_at&quot;:&quot;2020-07-17T08:02:04.000000Z&quot;,&quot;updated_at&quot;:&quot;2020-07-17T08:02:04.000000Z&quot;,&quot;category_count&quot;:660}]">
<div class="container">
       <!-- container stuff -->
        
</div>
</index-vue>
    </main>
</div>

My question is how can i hide or encrypt the data that i have injected in such a way that it can not be viewed if someone viewed page source on the browser? Please don't provide an ajax or axios call back solution since i am comfortable with how that works.

aurawindsurfing

5 years ago

Level 50

@peterjey

The simple answer is: "Don't send it to the front end".

Think about it. You want to send it to Vue but you don't want to show it in the source code? Once its on the page it is in the source code.

Maybe you are sending too much data to front end?

peterjey

5 years ago

Level 2

@aurawindsurfing thanks alot for taking your time.

Yes I have a lot of data that i want to send to vue.js but don't want to show in 'page-source' to the DOM.

The reason i like the method of passing data from laravel directly to vue is that it seems much faster than sending the request then sending an ajax call to load data.

Any suggestion of getting data faster to vue js from laravel in a single request without seeing the data in the DOM would solve my problem.

Thanks

aurawindsurfing

5 years ago

Level 50

@peterjey you are mixing 2 things Server Side PHP and Client Side Javascript in this case Vue.

This post explains it better: https://softwareengineering.stackexchange.com/questions/171203/what-are-the-differences-between-server-side-and-client-side-programming

Hope it helps!

Please or to participate in this conversation.