How to access shared data from a layout component in Vue/Inertiajs

Question

I have used this instruction from inertiajs official website to share user auth data and it works fine for all pages except those who doesn't directly rendered by Inertia::render() method.

I need to access user authentication data from a layout component named <Master> but I can't!

here is my structure/heirarchy:

- Vue/
  - Pages/
    - Home/
      - Index.vue
    - Layouts/
      - Master.vue
      - Header.vue
      - Footer.vue
  - App.js

here is my <Master> component:

<template>
    <Head>
        <title>My Title</title>
    </Head>

    <Header :user="user"/>
    <slot/>
    <Footer/>
</template>

<script>
import Header from './Header';
import Footer from './Footer';
import {Head} from '@inertiajs/inertia-vue3';

export default {
    data() {
        return {
           user: this.auth.user,
        }
    },
    props:{
        auth: Object,
    },
    components: {
        Header,
        Footer,
        Head,
    }
}
</script>

xenooooo · Accepted Answer · 2022-12-11 06:12:10Z

1

You can use the $page property or the usePage() hook.

<Header :user="$page.props.auth.user" />

const user = computed(() => usePage().props.value.auth.user)

If you scroll down the the link you have given you will know it.

answered Dec 11, 2022 at 6:12

xenooooo

1,2162 gold badges4 silver badges10 bronze badges

Add a comment |

Collectives™ on Stack Overflow

How to access shared data from a layout component in Vue/Inertiajs

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related