[Vuejs]-Proper way to hide components from not auth users in vue

you could use vue’s v-if. this would conditionally render html elements based on your parameter.

<post data="{!! json_encode($post) !!}">
    <template v-if="userId === postUserId">
       <edit-post></edit-post>
    </template>
</post>

v-if is “real” conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.

Not really, no, a proficient enough user with access to a javascript console can run any code they want and do as they please within the frontend.

If you were doing something like sending everyone’s private data to all users and hiding it selectively with Javascript that woukd be a Very Bad Idea. But as it is… if the backend will catch cases of users trying to actually edit a post that isn’t theirs, then you’ll be fine. All your authentication and authorization logic should be there anyway, and Vue would mostly take care of rendering

You never rely on front to validate data. Ever.

You should look into API Based Development,

In your case, passing current user id to back end isn’t necessary. Always check Auth::user() in your Laravel app. (On the backend). Malicious user cannot fake authenticated user.