access shared data in app.js

hello everybody. i have settings section in my admin panel that admin can set a name or title for the whole site. i want to set the title of each page in this format: "adminTitle - pageSpecificTitle". I'm sharing the adminTitle via HandleInertiaRequests middleware. now I want to access it in my app.js file so that i can use this sample code: title: title => adminTitle + ' - ' + title how to access shared data in app.js?

danielcoimbra

2 years ago

Level 12

@nobody021h Try to set the title in your layout page, using the Inertia's Head Component, something like:

<template>
    <Head title="pageTitle"></Head>
    <main>
        <article>
            <slot></slot>
        </article>
    </main>
</template>

<script setup>
import { Head, usePage } from '@inertiajs/vue3'

const pageTitle = usePage().props.adminTitle
</script>

In your app.js, you can have something like:

createInertiaApp({
    title: (title) => `${appName} - ${title}`,
    ...
})

Hope it helps!

Take a look at the Modular Project. There's a lot of practical concepts and use cases related to Laravel + Vue + Inertia.js and Tailwind, there: https://docs.ismodular.com/

nobody021h

2 years ago

Level 1

thank you @danielcoimbra as i want to concat the page specific title to the fixed admin defined title, it couldn't be set in the layout. so i must define it in each page component like this:

<title>{{ $page.props.websiteName + ' - ' + name }}</title>

1 like

Please or to participate in this conversation.