garrettmassey's avatar

Organizing Nova Tool pages with Inertia

I'm working on building a tool in Nova, and I want to specifically reference the Inertia render like so:

class TestController extends Controller
{
    public function index()
    {
        return Inertia::render('Test/Index');
    }
}

In my test-tool.js:

import Index from './pages/Index.vue'

Nova.booting((app, store) => {
    Nova.inertia('Test/Index', Index);
})

So I am setting up the Nova.inertia to call the "Index.vue" page component "Test/Index", and then I reference that in the Controller. However, I get a 404 not found error when I use this approach.

If I change the test-tool.js to say Nova.inertia('Test-Index', Index) and then I change the Controller's Inertia::render('Test-Index') that works just fine, and the page loads as expected.

Does Nova prevent using the path structure for finding Vue components to render via Inertia?

0 likes
2 replies
LaryAI's avatar
LaryAI
AI
1 year ago
Level 58

It looks like you're trying to organize your Nova Tool pages using Inertia.js and Vue components, but you're running into an issue with the path structure. The problem seems to be related to how Nova registers and resolves the Inertia components.

Nova's Nova.inertia method registers the component with a specific name, and it appears that using a path-like structure (e.g., Test/Index) might be causing issues. However, you can still achieve a similar organizational structure by using a different naming convention that avoids the slash (/) character.

Here's a solution that maintains a clear organizational structure without using slashes:

  1. Controller: Update your controller to use a dot (.) instead of a slash (/) in the component name.

    class TestController extends Controller
{
    public function index()
    {
        return Inertia::render('Test.Index');
    }
}

  2. JavaScript: Update your test-tool.js to match the new naming convention.

    import Index from './pages/Index.vue'

Nova.booting((app, store) => {
    Nova.inertia('Test.Index', Index);
})

By using a dot (.) instead of a slash (/), you can avoid the 404 not found error while still maintaining a clear and organized structure for your components.

This approach should resolve the issue and allow you to organize your Nova Tool pages effectively.

1 like

Please or to participate in this conversation.