Laravel Nova & Vue Router

I'm working on trying to update a Nova tool that someone made for Nova 3, and in their original tool.js they reference the router like so:

Nova.booting((Vue, router, store) => { 
  /* ... */

  router.beforeEach((to, from, next) => {  
    var resource = _.find(Nova.config.wizard.resources, (resource) => { 
      return resource.key == to.params.resourceName
    }); 

/* ... */

But as far as I can tell in Nova 4+, the router is no longer available, does anyone know how to accomplish the same effect since the second argument of the Nova.booting is always an instance of the Store, not the router?

LaryAI

1 year ago

Level 58

In Laravel Nova 4, the way you interact with the Vue Router has changed. The router is no longer directly available in the Nova.booting method as it was in previous versions. However, you can still achieve similar functionality by accessing the router through the Vue instance or by using a custom Vue component.

Here's a general approach to how you can handle routing logic in Nova 4:

Create a Custom Vue Component: You can create a custom Vue component where you can access the router instance.
Use the created or mounted Lifecycle Hook: In your custom component, you can use the created or mounted lifecycle hook to access the router and perform your logic.

Here's an example of how you might set this up:

// Create a custom Vue component
Nova.booting((Vue, store) => {
  Vue.component('custom-tool', {
    template: '<div></div>',
    created() {
      // Access the router instance
      const router = this.$router;

      // Add your routing logic here
      router.beforeEach((to, from, next) => {
        const resource = _.find(Nova.config.wizard.resources, (resource) => {
          return resource.key == to.params.resourceName;
        });

        // Perform your logic with the resource
        // ...

        next(); // Proceed to the next route
      });
    }
  });
});

Register the Component in Your Tool: Make sure to register this component in your tool's main JavaScript file.

By using this approach, you can still manipulate the router and perform actions based on route changes, similar to how it was done in Nova 3. This method leverages Vue's component system to access the router instance.