Search code examples
laravelvuejs3inertiajslaravel-jetstream

How does the shared data function usePage work in inertia

I am using laravel jetstream with inertia js and vue3. I am trying to create a Layout-Component to create the navigation bar there. The Layout-Component needs to fetch shared data: https://inertiajs.com/shared-data

Why does my code not work?

My code:

<?php

namespace App\Http\Middleware;

use Illuminate\Http\Request;
use Inertia\Middleware;

class HandleInertiaRequests extends Middleware
{
    /**
     * The root template that's loaded on the first page visit.
     *
     * @see https://inertiajs.com/server-side-setup#root-template
     * @var string
     */
    protected $rootView = 'app';

    /**
     * Determines the current asset version.
     *
     * @see https://inertiajs.com/asset-versioning
     * @param  \Illuminate\Http\Request  $request
     * @return string|null
     */
    public function version(Request $request)
    {
        return parent::version($request);
    }

    /**
     * Defines the props that are shared by default.
     *
     * @see https://inertiajs.com/shared-data
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            // Synchronously
            'assetsPath' => "test",
        ]);
    }
}

and AppLayout Component:

    <template>

    <Head :title="title" />

    <div>
        <p>{{ this.logoPath }}</p>
    </div>
</template>

<script>
import JetApplicationMark from '@/Jetstream/ApplicationMark.vue'
import JetBanner from '@/Jetstream/Banner.vue'
import JetDropdown from '@/Jetstream/Dropdown.vue'
import JetDropdownLink from '@/Jetstream/DropdownLink.vue'
import JetNavLink from '@/Jetstream/NavLink.vue'
import JetResponsiveNavLink from '@/Jetstream/ResponsiveNavLink.vue'
import { Head, Link } from '@inertiajs/inertia-vue3'
import { computed } from 'vue'
import { usePage } from '@inertiajs/inertia-vue3'

export default {

    setup ()
    {
        const assetsPath = computed( () => usePage().props.assetsPath )
        return { assetsPath }
    },


    props: {
        title: String,
        assetsPath: String,
    },

    components: {
        Head,
        JetApplicationMark,
        JetBanner,
        JetDropdown,
        JetDropdownLink,
        JetNavLink,
        JetResponsiveNavLink,
        Link,
    },

    data ()
    {
        return {
            showingNavigationDropdown: false,
        }
    },

    methods: {
        logout ()
        {
            this.$inertia.post( route( 'logout' ) );
        },
    },

    computed: {
        logoPath ()
        {
            return `${ this.assetsPath }/myimage.png`;
        }
    }
}

The Output: undefined/myimage.png

Thanks for your help!

Solution

  • In Vue3 inertia

    <script>
    import { computed } from 'vue'
    import { usePage } from '@inertiajs/inertia-vue3'

    export default {
      setup() {
        const assetsPath = computed(() => usePage().props.value.assetsPath)
        return { assetsPath }
      },
}
</script>

    Seen here on "accessing shared data" in vue3 https://inertiajs.com/shared-data#accessing-shared-data (be sure to click the vue3 tab)