vue.js - How to trigger IntertiaUI modal from a Laravel controller - Stack Overflow

I am using InertiaUI modal: for my Vue3 application.

It works fine from the front end when I use the ModalLink and Modal provided by InertiaUI:

<ModalLink :href="`/example`"/>

And then in the modal vue component like:

<template>
  <Modal>
    content
  </Modal>
</template>

However, I have a use case where I want it to trigger the modal component to popup from a Laravel controller:

public function store() {
  // code
  return Inertia::render('UserGameShow', [
    'game' => $game,
    'scores' => $scores,
    'gameId' => $game->id
  ]);
}

However, this is giving me an error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'shouldRender')

I have tried different way:

session()->flash('modal', ['component' => 'UserGameShow',  'props' => [
    'game' => $game,
    'scores' => $scores,
  ]
]);

But nothing seems to work.

I am using InertiaUI modal: https://inertiaui.com/inertia-modal/docs/introduction for my Vue3 application.

It works fine from the front end when I use the ModalLink and Modal provided by InertiaUI:

<ModalLink :href="`/example`"/>

And then in the modal vue component like:

<template>
  <Modal>
    content
  </Modal>
</template>

However, I have a use case where I want it to trigger the modal component to popup from a Laravel controller:

public function store() {
  // code
  return Inertia::render('UserGameShow', [
    'game' => $game,
    'scores' => $scores,
    'gameId' => $game->id
  ]);
}

However, this is giving me an error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'shouldRender')

I have tried different way:

session()->flash('modal', ['component' => 'UserGameShow',  'props' => [
    'game' => $game,
    'scores' => $scores,
  ]
]);

But nothing seems to work.

• laravel
• vue.js
• inertiajs

Share Improve this question Follow edited Jan 30 at 9:29 skdishansachin 72455 silver badges2121 bronze badges asked Jan 29 at 15:54 Rj JrRj Jr 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can't render an Inertia Modal from any request type other than GET. I'm assuming because the method you are using is store that this is a POST request.

I suggest moving your modal render function to a separate route and redirecting to this route once your store routine has completed.

For example:

public function store(): RedirectResponse
{
    // etc

    return to_route('users.games.show', $game);
}

public function show(Game $game): \Inertia\Response
{
    // etc

    return Inertia::render('UserGameShow', [
        'game' => $game,
        'scores' => $scores,
        'gameId' => $game->id
    ]);
}

Hope this helps