Q: Possible use of Livewire inside Laravel Nova anywhere?

[ekandreas]

I know Laravel Nova is vue based but any clue or idea on how or where to inject Livewire functionality?
I would like some kind of view resource to display a plain blade view but with all the nova chrome around it.
Am I just crazy? :-)

[davidhemphill]

It's possible but not officially supported yet. We're working on something to make this easier if we can get it to be reliable.

@davidhemphill I am also looking for this.
Is there any 'hint' you can give me to get this working?

[ClaraLeigh]

So I couldn't wait for a reply so I made a super hacky way to do it.

I am sure there is a better way to do this, using resource tools or cards or something, but for now I've just created whole template files and overrode the routes I wish to be custom.

Here is a gist with my code:
https://gist.github.com/JeraNS/c253db5cd04cb3063802b4468408a636

Essentially it lets you use custom controllers and views inside nova.
If someone has done this better, please @ me.

@jerans I really like your approach it looks simple and not to dirty. What I would like to know is how this works in your Nova application. So, how does this look like? Will the Livewire components be shown in the Nova environment itself?

Thank you :)

[ClaraLeigh]

@uteq I was basically wanting to change the edit page of my payment gateways so I didn't have to rewrite everything in Vue.

I've just replaced the whole edit page by putting in a route in my web.php overriding the nova route, however it looks like a normal nova page.
After posting this I've found two issues, one is that obviously if you click the edit link, it takes you via vue-router, ignoring my routes in web.php. So I've hacked the nova/resources/js/components/Index/ResourceTableRow.vue (then recompiled). Changing it to a href using $router.resolve

<a v-else :href="$router.resolve({
              name: 'edit',
              params: {
                resourceName: resourceName,
                resourceId: resource['id'].value,
              },
              query: {
                viaResource: viaResource,
                viaResourceId: viaResourceId,
                viaRelationship: viaRelationship,
              },
            }).href"
             class="inline-flex cursor-pointer text-70 hover:text-primary mr-3"
          >
              <icon type="edit" />
          </a>

which means it loads the page instead using the router.

The second issue I'm facing is that it doesn't seem to be posting the updated wire:model on button click, but it works the second time I press it or if I hit enter. Very weird issue, might be unrelated, will have to look further at this another day, I've wasted too much already.

I'm hoping someone else comes along with a native way to do this, I really need to be focusing on my woocomm and shopify integrations instead of this stupid admin stuff. This is why I turned to nova in the first place to let me spend more time elsewhere

EDIT: the hit enter issue was just lazy models, no problem at all, I was just too tired.

[AxelDeneu]

Hi! I'm also interested in this feature. Any news on this? Is it in development or not?

[giobi]

This would make working with nova so much easier. I'm superhacking the nova footer to display some additional data on specific forms, but it's a very dirty approach

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.