Laravel Nova Metric card position

Is it possible to move the card below the block with detail?

explanation image

Answer

While Laravel Nova doesn’t allow this, you can use custom vanilla JavaScript to cut and paste it. It’s a bit hacky but it works 🤷‍♂️

This is all in the Card.vue that the artisan nova:card yourname/customcard command creates.

Give the card an id so we can find it later:

 <card class="flex flex-col justify-center" id="custom-card">

Then find it again:

let customCard = document.querySelector('#custom-card');

The listing of the details of that resource has a div with a custom dusk element and the value is set to resourcename-detail-component where resourcename is e.g. user. You need to find that element and then append the card snippet to it:

let anotherComponent = document.querySelector('div[dusk=resourcename-detail-component]');
anotherComponent.appendChild(customCard);

I’ve written this up here: Laravel Nova: Move cards in Resource Detail View