Custom tools using multiple root elements in their Vue <template> break other pages

[degecko]

• Laravel Version: 9.17.0
• Nova Version: 4.9.2
• PHP Version: 8.1.6
• Database Driver & Version: MySQL 8
• Operating System and Version: macOS 12.4
• Browser type and version: Chrome 102

Description:

I've just spent 4+ hours debugging this weird scenario.

If your custom tool's section contains multiple root elements (Vue 3 accepted), rather than just one (old Vue 2 restriction), when trying to click on any other link, the new page will not load.

Also, the old scripts from the tool remain in action even after the router view has been cleared, so it seems like the component is not switched properly to the one belonging to the new page.

I believe this is an InertiaJS issue, not Nova, but I'm not entirely sure.

Detailed steps to reproduce the issue on a fresh Nova installation:

1. Create a custom tool:

php artisan nova:tool acme/new-tool

Answer yes to everything.

2. Replace its Vue template's ... section with:

<template>
    <div>test</div>
    <div>test</div>
</template>

3. Compile the tool's assets: cd nova-components/NewTool && npx mix
4. Register the tool and display it in the menu.
5. Go to nova in your browser and click the new link to the tool.
6. Click on any other nova page from the menu. The new item in the menu becomes 'active', but the page doesn't load the contents, it stays empty.

To confirm that with a single root element is working fine, delete one of the <div>test</div> lines from the template. Compile the assets again and repeat step 6. Now everything works fine.

[crynobone]

I do think this is more of Vue's issue/limitation than anything.

[davidhemphill]

Nova uses Inertia.js internally. I spoke with its creator and this is expected behavior even though Vue 3 supports multiple root elements. Inertia expects to mount a single component and pass it the necessary data. It's recommended to use a single root element for Inertia pages. Any components used from then on will support using multiple ones, but the top-level must be a single element.

[degecko]

Understandable, thanks for the clarification!

I suggest adding a note in the official documentation about this. Should be useful to others.