Vue 3: Props are visible using the element inspector

[dubljanin96]

I have this problem with Inertiajs and Vue3 where props are visible when I do inspect element. Is it okay?
How to change this? Have I made any mistakes?

[reinink]

This is totally expected behaviour. All data that you pass from your server-side framework to Inertia is publicly available.

As noted from the docs:

To ensure that pages load quickly, only return the minimum data required for the page. Also, be aware that all data returned from the controllers will be visible client-side, so be sure to omit sensitive information.

[muuvmuuv]

I know this is old but would it be possible to store it in a head meta tag instead of the app div? The data-page is so long, I cannot navigate in the Elements view of chrome debugger properly.

[dubljanin96]

Why is not same thing happening with with Vue 2?

[grantholle]

It does happen with vue 2 when the page first loads, but it removes the data attribute from the element.

[claudiodekker]

In Vue2, the entire element that you're mounting on gets consumed and replaced: https://vuejs.org/v2/api/#el

The provided element merely serves as a mounting point. Unlike in Vue 1.x, the mounted element will be replaced with Vue-generated DOM in all cases. It is therefore not recommended to mount the root instance to or .

[ajnsn]

@BlueSilver001

Still not completly hiding it but removing it after the app is mounted, you may try out the following.
Notice the onMounted hook.

import { createApp, h, onMounted } from 'vue';
import { App, plugin } from '@inertiajs/inertia-vue3';

const el = document.getElementById('app');

createApp({
    setup() {
        onMounted(() => {
            delete el.dataset.page;
        });
    },
    render: () =>
        h(App, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: name => require(`./Pages/${name}`).default,
        }),
})
    .use(plugin)
    .mount(el);

[CamKem]

Also does the job too:

.mount(el)
.$nextTick(() => { delete el.dataset.page })

[MohammadZarifiyan]

This solution is not working anymore.

[MohammadZarifiyan]

I need to remove data-page attribute from my application, Sometime this attribute value makes my web page 2~4 MB larger.

[stevebauman]

@MohammadZarifiyan, removing the data-page attribute is only cosmetic and is done after Inertia starts on the client. Inertia requires this property.

If your data-page attribute is large, then that means the data you're sending to Inertia is that large.

[MohammadZarifiyan]

@stevebauman
I think there must be a way to remove this attribute after rendering page with SSR.
For example:
1 - Inertia must render the page using data-page value that coming from Laravel.
2 - Then it removes the data-page attribute from final HTML result.
3 - Sends final result to browser.

But if Inertia JS still needs data-page attribute value, SSR must store value somewhere in database and give and ID to client that refers to data stored in database.
After rendering page in browser Inertia must fetch data-page data from SSR database using a simple HTTP Request before calling Vue beforeCreate() hook. That API call should not block rendering page in browser.

By this approach page will load faster and Inertia still can have access to data-page attribute value in client side.

[GeorgeFourkas]

You can basically do this:

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({el, App, props, plugin}) {
    
        const application = createApp({render: () => h(App, props)})
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
            
        delete el.dataset.page

        return application;
    },
    progress: {
        color: '#4B5563',
    },

So what we've done here is save the creation of the vue Instance into a variable called application, then after the data-page have been parsed we delete the attribute, and the return the application instance

[jozyonline]

this approach works really well and efficiently thanks a lot.

[dickmartinez]

you rule dude!, thanks a lot

[MuhRiswan]

thanks sir its work on Inertia React!

[mhdasad]

really appreciate this, thank you sir 👌