Inertia $page Issue

@Rutherfordium Hi Thanks for the reply ,

I added this

import {usePage} from '@inertiajs/inertia-vue3'

function username() {
    return usePage().props.auth.user.username;
}

and echoed it above like

  <p class="navbar-brand fs-6">Welcome Back ,{{username}} !</p>

but it returns and spits out a whole function back

Welcome Back ,function username() { return (0,_inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.usePage)().page.props.auth.user.username; } !

@Elliot_putt Maybe it would be better if you posted the whole file, so we can see exactly what you are trying to do.

@Elliot_putt if you are using the composition API and creating a computed property:

import { computed } from 'vue'

const username = computed(() => {
  return usePage().props.auth.user.username;
})

Or, you can just use the function you already defined, but called as a function in the template

  <p class="navbar-brand fs-6">Welcome Back ,{{ username() }} !</p>

@Sinnbeck Good idea so I'm watching Jeffery's interia course using shared properties:

The End Goal: Echo out the username

<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light py-4 px-2 justify-content-between">
        <div class="d-flex">
            <a class="navbar-brand" href="/">My App Name |</a>
            <p class="navbar-brand fs-6">Welcome Back ,{{username}} !</p>
        </div>
        <div>
            <NavLink class="mx-2" href="/" :active="$page.component === 'Home'">Home</NavLink>
            <NavLink class="mx-2" href="/settings" :active="$page.component === 'Settings'">Settings</NavLink>
            <NavLink class="mx-2" href="/users" :active="$page.component === 'Users'">Users</NavLink>
        </div>

    </nav>

</template>

<script setup>
import NavLink from './NavLInk';
import {usePage} from '@inertiajs/inertia-vue3'

function username() {
    return  usePage().props.auth.user.username;
}

// export default
// {
// components :{NavLink},
//
//  computed : {
//     username(){
//         return this.$page.props.auth.user.username;
//     }
//  }
// }


</script>

The bit commented out is from the options API which works but I cannot get it to work in the composition api

@Elliot_putt username is a function, not a computed property. See my earlier reply

@tykus Hi , I tried both ways but my console returns this error ?

Uncaught (in promise) TypeError: _inertiajs_inertia_vue3__WEBPACK_IMPORTED_MODULE_1__.usePage().props.auth is undefined

Yet I have defined it above

import {usePage} from '@inertiajs/inertia-vue3'

@tykus

<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light py-4 px-2 justify-content-between">
        <div class="d-flex">
            <a class="navbar-brand" href="/">My App Name |</a>
            <p class="navbar-brand fs-6">Welcome Back ,{{username}} !</p>
        </div>
        <div>
            <NavLink class="mx-2" href="/" :active="$page.component === 'Home'">Home</NavLink>
            <NavLink class="mx-2" href="/settings" :active="$page.component === 'Settings'">Settings</NavLink>
            <NavLink class="mx-2" href="/users" :active="$page.component === 'Users'">Users</NavLink>
        </div>

    </nav>

</template>

<script setup>
import NavLink from './NavLInk';
import {usePage} from '@inertiajs/inertia-vue3'

import { computed } from 'vue'
const username = computed(() => {
    return usePage().props.auth.user.username;
});

</script>

This is your computed reply which comes back with the error I sent above

@Elliot_putt what is the structure of the page props object?

@tykus Is This what you mean?

initialPage:Object
props:Object
auth:Object
user:Object
username:"Elliot Putt"

@Elliot_putt the props are not in the initialPage Object?

@tykus Okay i Managed to solve it the computed property bit works which is great thanks for some odd reason I needed to add props.value ?

usePage().props.value.auth.user.username

slightly odd to me but it works thanks all for you help!

@Elliot_putt You're a life saver! I couldn't figure this one out but, indeed, when I changed to props.value ... it worked!