May Sale! All accounts are 40% off this week.

ALyxraVI's avatar

Laravel Nova custom action response modal

I'm trying to register and use action response modal.

To start, I generated an asset with:

php artisan nova:asset acme/ApiTokenCopier

It then generates the nova-components folder, npm dependences, assets, etc Then I created a components folder with a custom modal in a vue file. nova-components/ApiTokenCopier/resources/js/components/ApiTokenCopier.vue

<template>
    <modal
    	@modal-close="handleClose"
        data-testid="ApiTokenCopier"
         tabindex="-1"
        role="dialogue"						
    >
        <div class="bg-white rounded-lg shadow-lg overflow-hidden" style="width: 400px">
            <p class="text-80 px-8 my-8">{{ data.message } </p>
	        <p class="text-80 px-8 my-8">{{ data.token } </p>
        </div>
       <div class="bg-white rounded-lg shadow-lg overflow-hidden" style="width: 400px">
            <button 
                class="bg-primary text-white h-9 p-4" type="button" 
                @click.prevent="handleClose()"
             >
                 Close
            </button>
        </div>
    </modal>
</template>

<script>
export default {
    props:{
        data:{ type: Object },
    },

    methods:{
        handleClose(){
            this.$emit('close')
        },
    },
}
</script>

Next, I went to register the component for use: In the generated app/nova-components/ApiTokenCopier/resources/js/asset.js file

import ApiTokenCopier from './components/ApiTokenCopier'

Nova.booting(app => {
  app.component('ApiTokenCopier', ApiTokenCopier)
})

After registering, I navigated back to /nova-components/ApiTokenCopier and ran these commands to compile/build the asset files.

npm run dev && npm run prod

Lastly, I went to my nova action file, and in the handle() method added:

return Action::modal('ApiTokenCopier', [
            'message' => 'The API token was generated!',
            'token' => $token,
        ]);

Yet when that action is activated, it succeeds but the modal doesn't appear. No errors either, so I'm not really sure what could be wrong. I'm either missing a step/connection somewhere or I've done something incorrectly unknowingly. Any input would be appreciated.

0 likes
3 replies
clevyr's avatar

I tried exactly the same process (different component name) and got exactly the same results - no success/error message but also no modal. Did you ever figure anything out?

LMAllema's avatar

Got the same situation too. Finally found that I forgot to publish the assets after upgrading Nova past 3.21. Before that, the Vue component just ignores modal responses (as the feature doesn't exist) and fall in the default case which is the default success message.

Try to run 'php artisan nova:publish' .

1 like
mariorosenthal13's avatar

I had this issue, but found that the problem was that I needed to run 'npm i' and 'npm run dev' inside of 'nova-components/"component-name"

Please or to participate in this conversation.