Laravel Nova Card Options Missing Function

Question

I was recently given a Laravel app that uses Nova and Vue in it - all three of which I've never worked with before, so apologies in advance if I ask something that should be obvious. Inside the app there is a custom card that was already setup by the previous developer that works fine and I'm just trying to add an extra property for the Vue side to read. The structure of the card is pretty basic:

public $width = 'full';

    public function currentUser()
    {
        return $this->withMeta(['currentUser' => Auth()->user()->id]);
    }
    public function is_active()
    {
        return $this->withMeta(['is_active' => Auth()->user()->is_active]);
    }

    public function information()
    {
        $information_id = Information::where('user_id', Auth()->user()->id)->first()->id;
        return $this->withMeta(['information' => $information_id]);
    }

    public function component()
    {
        return 'overview';
    }

This card shows up on the dashboard and using the Network tab in debug tools, I can see where the JSON response that goes to Vue when the card's API component is hit. The problem is, the one property I'm trying to add (information) doesn't show up. The full response is:

{
    "label": "Dashboard",
    "cards": [
        {
            "width": "full",
            "component": "overview",
            "prefixComponent": false,
            "onlyOnDetail": false,
            "currentUser": 780,
            "is_active": 1
        }
    ]
}

I've tried running npm install, npm dev and php artisan nova:publish - all are successful, but that JSON isn't picking up the new functions I added to the card's PHP file. For the sake of just trying, I even added these two:

public function testing()
{
    return 'test';
}

/**
 * Indicates that the analytics should show current visitors.
 *
 * @return $this
 */
public function currentVisitors()
{
    return $this->withMeta(['currentVisitors' => true]);
}

Despite recompiling everything, those functions also don't seem to do anything - the JSON returned stays the same. I'm positive I'm doing something very basic wrong, but for the life of me can't quite figure it out.

Any suggestions?

Answer 1

I personally did create 2 components for Laravel Nova 3.x (one of them using VueJS), and what I did was:

1. Go inside the component root folder and run npm run prod (or dev ir you are testing)
2. Then, you must have your component registered as a composer package, so when you load the Component's ServiceProvider, you should have:

public function boot(): void
{
    $this->loadViewsFrom(__DIR__.'/../resources/views', 'component-view-name');

    Nova::serving(function (ServingNova $event) {
        Nova::script('component-view-name', __DIR__.'/../dist/js/field.js');
    });
}

That Nova::serving is the one "attaching" or sharing your desired *.js compiled file.

---

I am not sure about cards. My component was just a new field, not a card, but should be exactly the same.