Pass prop to persistent layout

Question

I have search functionality in my header and i want to pass prop products to the header in the persistent layout in order to show these products in the search and filter them accordingly, how can i pass products prop to persistent layout ? thanks in advance

app.js

...
import MainLayout from "./Pages/Layouts/MainLayout.vue";

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => {
        const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
        let page = pages[`./Pages/${name}.vue`];


        page.default.layout = name.startsWith("Dashboard/")
            ? undefined
            : MainLayout;
        return page;
    },


    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            ...
            .mount(el);
    },
    progress: {
        color: "#4B5563",
    },
});

Answer 1

I solved that issue by making a route that returns products as json:

Route::get('/products',function(){
    $products = DB::table('products')->get();

    return response()->json([
        'products' => $products,
    ]);
});

and then fetch products from this route as an api, using fetch/axios and watchEffect:

import { watchEffect, ref } from "vue";

const products = ref(null);

watchEffect(async () => {
    const response = await fetch(`/products`);
    products.value = await response.json();
    console.log(products.value);
});

UPDATE

there's no need to use watchEffect here as there is no reactive dependencies inside it, just use fetch in the script root

I also suggest to avoid using refs for non-primitives. That way you can avoid unwrapping refs in the script secion.