How does one use Vite assets in Laravel Nova ?

[piljac1]

I'm a total noob with Laravel Vite (this is my first project using it, I'm used to Laravel Mix). In Laravel Mix, you could add the following to the NovaServiceProvider:

Nova::style('custom', asset('css/nova/custom.css'));
Nova::script('custom', asset('js/nova/custom.js'));

Now, Vite doesn't even generate compiled files (to my knowledge) when in dev, and when you build for production, they generate dynamically named files (i.e. app.3341fc36.js). How do you make Nova aware of those assets ?

Thanks in advance!

[crynobone]

Using Vite in Nova isn't supported nor do we offer support to do so. AFAIK every piece of JS compiled with webpack would have to be migrated to Vite before you can compile custom tool using Vite

[piljac1]

So the solution would be to use Nova Assets for now, which use Laravel Mix I believe ?

[piljac1]

After some testing, the following works for npm run build using Vite:

Nova::style('custom', Vite::asset('resources/css/nova/custom.css'));
Nova::script('custom', Vite::asset('resources/js/nova/custom.js'));

However, it doesn't work when using npm run dev, because when running hot with Vite, scripts are registered with the type="module" configuration, which is not currently possible to specify when registering a script within Nova. As for the actual hot reload behavior, it would be possible to preserve it if we had a way to define a type="module" script and if we registered the base script manually (which would be Vite::asset('@vite/client')).

@crynobone Let me know if you'd be interested if I coded what's necessary to support Vite. Technically, it wouldn't be breaking changes.

[jquirogaa]

Does nova 4 support vite to create custom tools now, @crynobone ?

[crynobone]

based on our tests so far it not possible to support or convert everything to Vite, especially if we want to support Nova's plugin (custom field, tool etc)

[jquirogaa]

thank you, @crynobone

[Radiergummi]

If anyone's still looking for this or interested, we're running entirely on Vite, including for custom tools. The only caveat is that hot reloading definitely doesn't work. I can put together instructions, if needed.

@crynobone are you guys currently working on Nova 5, or is there any indication of when Vite support will make it into Nova? I would prefer not having to annoy you about this, if only there were some way to follow Nova development (a roadmap or rough quarter-based milestones would be enough)…

[crynobone]

Even with Vite, hot reload is still not possible. This is a limitation with building assets when Nova also does have assets not being build at the same time.