Laravel-mix
Laravel Nova has been around for a long time and Laravel Mix was never updated in that time, so there is now a big catch-up from v1 to v6.
Tailwind 3
In Nova 3.0 Tailwind CSS 0.6.0 is still used, here too there will be an upgrade: Tailwind CSS 3!
Inertia.JS
Inertia implements a new approach to building classic server-driven web apps. Inertia makes it possible to create fully client-side rendered, single page apps without the complexity that usually comes with modern SPAs. It does this by leveraging existing server-side frameworks. Inertia has no client-side routing, nor does it require an API. Easily build controllers and page views like you always have!
Not a framework
Inertia is not a framework, nor is it a replacement for your existing server- or client-side framework. Rather, it is designed to work with them. Think of Inertia as glue that connects the two. Inertia does this via adapters. There are currently three official client-side adapters (React, Vue, and Svelte) and two server-side adapters (Laravel and Rails).
Example in Nova 4.0
You will especially notice the use of Inertia.js if you're going to make custom tools that use the Vue router. Nova has therefore replaced the Vue router with Inertia.js. As a result, when you upgrade to 4.0 and higher, you will have to migrate custom tools from Vue routes to registering Inertia page components and backend routes.
As an example we have a Nova 3 Vue router registration:
// In tool.js...
Nova.booting((Vue, router) => {
router.addRoutes([
{
name: 'sidebar-tool',
path: '/sidebar-tool',
component: require('./components/Tool'),
},
])
})
When we upgrade to Nova 4, you will need to register the tool components as follows:
// In tool.js...
Nova.booting((Vue) => {
Nova.inertia('SidebarTool', require('./component/Tool').default)
})
Once your Vue component is registered, you will need to define a server-side route for your tool to render your component:
// In ToolServiceProvider.php...
use Laravel\Nova\Nova;
Nova::router()
->group(function ($router) {
$router->get('sidebar-tool', function ($request) {
return inertia('SidebarTool');
});
});