CODEWITHSUNDEEP
laravelvue.jsinertiajs
Ramin Javi
Ramin Javi

Reputation: 1

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

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>

Upvotes: 0

Views: 1997

Answers (1)

xenooooo
xenooooo

Reputation: 1216

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.

Upvotes: 1

Related Questions