I can't get flash messages to the frontend

[thecyrilcril]

following the instructions on https://inertiajs.com/shared-data#flash-messages
I can't seem to get my flash messages to the frontend of my application. this.$page.props.flash.message keeps returning null

I am on Laravel 8 and manually installed inertia

λ npm list --depth 0              
C:\wamp64\www\freeclass           
+-- @inertiajs/[email protected]      
+-- @inertiajs/[email protected]  
+-- @inertiajs/[email protected]                   
+-- [email protected]            
+-- [email protected]                  
+-- [email protected]               
+-- [email protected]             
+-- [email protected]                
+-- [email protected]              
+-- [email protected]         
+-- [email protected]      
+-- [email protected]             
+-- [email protected]                    
+-- [email protected]                    
`-- [email protected]  

app.js

import Vue from 'vue'
import { App, plugin } from '@inertiajs/inertia-vue'
import PortalVue from 'portal-vue'
import VueMeta from 'vue-meta'
import { InertiaProgress } from '@inertiajs/progress'

...

Vue.mixin({ methods: { route } })

Vue.use(plugin)

Vue.use(PortalVue);
Vue.use(VueMeta, {
    refreshOnceOnNavigation: true
});


const el = document.getElementById('app')

new Vue({
  render: h => h(App, {
    props: {
      initialPage: JSON.parse(el.dataset.page),
      resolveComponent: name => require(`./Pages/${name}`).default,
    },
  }),
}).$mount(el)

Controller Method that does the redirect

...
public function store(ApplicantRequest $request)
    {
            $applicant = Applicant::create($request->validated());

            event(new ApplicantRegistered($applicant));

            return Redirect::route('applicants.create')->withFlash([
                'message' => ucfirst($applicant->first_name) .', you are registered!',
            ]);



    }

HandlleInertiaRequests.php Middleware

    public function share(Request $request)
    {
        return array_merge(parent::share($request), [
            'flash' => [
                'message' => function() use ($request){
                    return $request->session()->get('message');
                }
            ],
        ]);
    }

Register.vue (Component that displays the flash.message)

<template>
    <page-layout>
      <div v-if="flash.message" class="lg:w-2/3 mb-2 bg-purple-200 rounded-l py-2 px-4">
        Hi {{ flash.message }}
      </div>
       ...
    </page-layout>
</template>
<script>
    import { Inertia } from '@inertiajs/inertia'
    import PageLayout from '@/Layouts/PageLayout'
    import Button from '@/Jetstream/Button'
    export default {
      name: 'Register',
      props: {
        title: String,
        description: String,
        errors: Object
      },
      metaInfo: {
        title: '',
        meta: [
            { description: '' }
        ]
      },
      components: {
          PageLayout,
          Button,
      },
      data() {
        return {
          flash: {
            message: null,
          },
        }
      },
      methods: {
        submit() {
          this.$inertia.post('/', this.form, {
            onSuccess: () => {
              // const { message } = this.$page.props.flash
              // this.flash = { message }
              console.log(this.$page.props)
              this.flash = this.$page.props.flash.message
              ...
              this.form.reset()
            },
            onError: () => {
              this.$swal({
                title: 'There are errors:',
                text: 'please correct the fields in red borders and try again!'
              })

            },


          })
        },
      },
    }
</script>

[thecyrilcril]

for some reason the with() method works but not the withFlash()

[reinink]

for some reason the with() method works but not the withFlash()

I think this is the issue here. There is no withFlash() method in Laravel. Just use with(), as you discovered. 👍