How to overwrite a default Nova component in Nova 4

[PureLuck3]

I am trying to overwrite a Vue component using Laravel Nova 4, but I seem to only be able to register it too soon or too late, using the booting and booted Nova methods.

Basically, i want to override the DetailActionDropdown to change the modals width.

PS: I have installed the dependencies and compiled the assets.

Does anyone have any ideas how to do this?
This is what I have done up until now.

resources/js/nova/components/DetailActionDropdown.vue

<template>
  <div>
    <Dropdown>
      <span class="sr-only">{{ __('Resource Row Dropdown') }}</span>
      <DropdownTrigger
        :dusk="`${resource.id.value}-control-selector`"
        :show-arrow="false"
        class="rounded hover:bg-gray-200 dark:hover:bg-gray-800 focus:outline-none focus:ring"
      >
        <BasicButton component="span">
          <Icon :solid="true" type="dots-horizontal" />
        </BasicButton>
      </DropdownTrigger>

      <template #menu>
        <DropdownMenu width="auto" class="px-1">
          <ScrollWrap
            :height="250"
            class="divide-y divide-gray-100 dark:divide-gray-800 divide-solid"
          >
            <div class="py-1">
              <!-- Preview Resource Link -->
              <DropdownMenuItem
                v-if="resource.authorizedToView"
                :data-testid="`${resource.id.value}-preview-button`"
                :dusk="`${resource.id.value}-preview-button`"
                as="button"
                @click.prevent="openPreviewModal"
                :title="__('Preview')"
              >
                {{ __('Preview') }}
              </DropdownMenuItem>

              <!-- Replicate Resource Link -->
              <DropdownMenuItem
                v-if="resource.authorizedToReplicate"
                :dusk="`${resource.id.value}-replicate-button`"
                :href="
                  $url(
                    `/resources/${resourceName}/${resource.id.value}/replicate`,
                    { viaResource, viaResourceId, viaRelationship }
                  )
                "
                :title="__('Replicate')"
              >
                {{ __('Replicate') }}
              </DropdownMenuItem>

              <!-- Impersonate Resource Button -->
              <DropdownMenuItem
                as="button"
                v-if="
                  currentUser.canImpersonate && resource.authorizedToImpersonate
                "
                :dusk="`${resource.id.value}-impersonate-button`"
                @click.prevent="
                  startImpersonating({
                    resource: resourceName,
                    resourceId: resource.id.value,
                  })
                "
                :title="__('Impersonate')"
              >
                {{ __('Impersonate') }}
              </DropdownMenuItem>

              <DropdownMenuItem
                v-if="resource.authorizedToDelete && !resource.softDeleted"
                data-testid="open-delete-modal"
                dusk="open-delete-modal-button"
                @click.prevent="openDeleteModal"
                :destructive="true"
              >
                {{ __('Delete Resource') }}
              </DropdownMenuItem>

              <DropdownMenuItem
                as="button"
                v-if="resource.authorizedToRestore && resource.softDeleted"
                class="block text-sm text-left w-full px-3 py-1 font-semibold text-red-400 hover:text-red-300 focus:text-red-600 focus:outline-none focus:ring ring-inset"
                data-testid="open-restore-modal"
                dusk="open-restore-modal-button"
                @click.prevent="openRestoreModal"
              >
                {{ __('Restore Resource') }}
              </DropdownMenuItem>

              <DropdownMenuItem
                as="button"
                v-if="resource.authorizedToForceDelete"
                class="block text-sm text-left w-full px-3 py-1 font-semibold text-red-400 hover:text-red-300 focus:text-red-600 focus:outline-none focus:ring ring-inset"
                data-testid="open-force-delete-modal"
                dusk="open-force-delete-modal-button"
                @click.prevent="openForceDeleteModal"
              >
                {{ __('Force Delete Resource') }}
              </DropdownMenuItem>
            </div>

            <div
              v-if="actions.length > 0"
              :dusk="`${resource.id.value}-inline-actions`"
              class="py-1"
            >
              <!-- User Actions -->
              <DropdownMenuItem
                v-for="action in actions"
                :key="action.uriKey"
                :dusk="`${resource.id.value}-inline-action-${action.uriKey}`"
                type="button"
                @click="() => handleActionClick(action.uriKey)"
                :title="action.name"
              >
                {{ action.name }}
              </DropdownMenuItem>
            </div>
          </ScrollWrap>
        </DropdownMenu>
      </template>
    </Dropdown>

    <!-- Action Confirmation Modal -->
    <component
      v-if="confirmActionModalOpened"
      :show="confirmActionModalOpened"
      :is="selectedAction.component"
      :working="working"
      :selected-resources="selectedResources"
      :resource-name="resourceName"
      :action="selectedAction"
      :endpoint="endpoint"
      :errors="errors"
      @confirm="executeAction"
      @close="closeConfirmationModal"
    />

    <!-- Action Response Modal -->
    <component
      v-if="selectedAction"
      :is="actionResponseData.modal"
      @close="closeActionResponseModal"
      :show="showActionResponseModal"
      :data="actionResponseData"
    />

    <DeleteResourceModal
      :show="deleteModalOpen"
      mode="delete"
      @close="closeDeleteModal"
      @confirm="confirmDelete"
    />

    <RestoreResourceModal
      :show="restoreModalOpen"
      @close="closeRestoreModal"
      @confirm="confirmRestore"
    />

    <DeleteResourceModal
      :show="forceDeleteModalOpen"
      mode="force delete"
      @close="closeForceDeleteModal"
      @confirm="confirmForceDelete"
    />
  </div>
</template>

<script>
  import DetailActionDropdown from '../../../../vendor/laravel/nova/resources/js/components/Dropdowns/DetailActionDropdown.vue'

  export default {
    name: 'AppDetailActionDropdown',

    extends: DetailActionDropdown,
  }
</script>

resources/js/nova/custom.js

Nova.booting((app, store) => {
  app.component('DetailActionDropdown', require('./components/DetailActionDropdown').default);
});

app/Providers/NovaServiceProvider.php

public function boot()
{
    parent::boot();

    Nova::remoteScript(asset('js/nova/custom.js'));
}

[piljac1]

@crynobone Correct me if I'm wrong, but it would probably solve the issue if you guys were to add a beforeMount hook that gets called before the Vue instance is mounted to the DOM. That way you would have a boot hook that gets called before Nova registers their components, a booted hook that gets called when everything is ready and a beforeMount hook that would be the last chance to run logic before the Vue instance is mounted.

[ianrobertsFF]

Nova.booting is the correct place to put it from a JS standpoint.

The way I do this is to create a new Nova Asset and do my overrides in there.

Nova::serving($callback) is where scripts are registered within an asset and this works for me.

Nova::serving(function (ServingNova $event) {
    Nova::script('nova-overrides', __DIR__.'/../dist/js/asset.js');
});

I just stick all of my overrides in one asset, but you could do as many assets as you need.

Edit: Just saw your PS, but I will leave the below in for anyone else who is struggling

Also don't forget you actually need to compile your component and then load the webpacked js, there is guidance on this in the Asset documentation but you also need to be aware that you need to install nova's npm dependencies

You may also have to create an @ alias in your webpack.mix.js of path.join(__dirname, '../../vendor/laravel/nova/resources/js'), so that nova components can get any imported dependencies

[piljac1]

Can you show us a snippet on how you do your overrides in your JS booting method? Because apart from how the script is registered (script vs. remoteScript), the rest of the configuration you mention is the exact same.

P.S. script and remoteScript should do the same thing. The main difference being that the regular script method hits a 403 (doesn't load) if your app hits a 403 Inertia page.

[piljac1]

Because I hardly see how it is possible to override existing components that are not directly linked to a PHP class having the ability to change the rendered component, since Nova registers their components after the booting callback is executed. So if you register a component under the same name as one registered by Nova (because you want to override it), it is ignored because Nova registers their components afterwards and overrides your component that was registered under a Nova core component name.

[ianrobertsFF]

I'll upload a sample repo overriding the CreateResourceButton (which I do anyway to allow both create and attach buttons for attachable resources), the nova-components are created as packages by default so it shouldn't be too hard to make you an example.

As to your second point this was fixed in 4.6.0 in app.js:348

  component(name, component) {
    if (isNil(this.app._context.components[name])) {
      this.app.component(name, component)
    }
  }

[piljac1]

Good to know they fixed it! It slipped past me when reading release notes I guess!

[ianrobertsFF]

Here is my simple example repo:

https://github.com/ianrobertsFF/nova-override-example

This is just overriding the Create/Attach buttons with my slightly altered version. Works fine my end!

[goldmerc]

@ianrobertsFF - Thanks for all the advice above.

I'm trying to override a component which is coming from a nova-package rather than the nova core. I can't get youur method to work in this scenario. My best guess is that the package I want to override is registering its components after mine and overriding my override! Any idea how I can get this to work? Thanks