Provide property to enduring design

Question

Provide property to enduring design

I need help with sending the 'products' prop to my persistent layout in order for it to display the products in the search field and filter them correctly. How can I achieve this? Thank you!

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",
            },
        });

laravel vue.js inertiajs vue-props

Answer 1

Answer №1

To resolve the issue, I created a custom route that serves products in JSON format:

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

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

Then, I accessed 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

You don't actually need to utilize watchEffect in this scenario since there are no reactive dependencies within it. You can simply use fetch at the root of the script.

I recommend refraining from using refs for non-primitive data types to avoid unwrapping them in the script section.

Answer 2

To resolve the issue, I created a custom route that serves products in JSON format:

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

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

Then, I accessed 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

You don't actually need to utilize watchEffect in this scenario since there are no reactive dependencies within it. You can simply use fetch at the root of the script.

I recommend refraining from using refs for non-primitive data types to avoid unwrapping them in the script section.

Provide property to enduring design

Answer №1

Similar questions

Capacitor: Building without push-notifications plugin is not possible

Experiencing excessive CPU utilization from Node.js while executing the vue-cli-service serve command

Adding local static files to index.html in Vue 3 can be achieved by utilizing the

Having trouble creating a scatter chart using vue-charts library

Laravel - Backpack linking select boxes based on another select box

Guide for setting up Laravel Homestead using VirtualBox.box installation

"Getters appear to be malfunctioning and it seems that the state value remains immutable within the Vuex

Is it considered acceptable to utilize a v-model's value as the basis for an if-statement?

"Is it possible to implement lazy-loading in Vue3 for one view from another

How do I retype an interface from a dependency?

Storing data from an API response into the localStorage using Vue.js upon clicking

Tips for obtaining consistent legend and tooltip for dynamically generated data in Vue using vue-chartjs

A Vue filtering feature that consistently adds 5 additional elements upon each use

Is there a way to pre-fill meta tags in Nuxt before the page finishes loading?

Guide to fetching and displaying a PDF file in the browser using Vue.js and Axios

Solving the CORS problem between Vue.js and Flask: Troubleshooting XMLHttpRequest Blockade

Update the Vue component upon fetching new data

Upon mounting, Vue.js 3 composable data is not available

I am having trouble getting PHP to parse JSON in the way I need

Using AXIOS and VueJs to visually represent data with a two-dimensional array