How to load Lumo in JS/CSS?

I’m testing the new Hilla FS router in Vaadin 24.4.0-alpha15.

Having a single $index.tsx in the frontend/views folder correctly picks up the view and displays it :raised_hands:

Is there a way for me to load Lumo styles and utility classes without having to create an index.tsx/routes.tsx?

Screenshot 2024-03-18 at 13.04.20

If you plan to stay simple, then I guess you could import those in your $index.tsx.

If you expect to eventually have multiple views and a main layout, then you could create a minimalistic $layout.tsx with only an <Outlet> and those imports.

What’s the correct way of loading Lumo? I suppose it’s not possible to just @import CSS files? Last I spoke with @Jouni1 he said that the components team does it like this:

// Add standard Lumo styles to the page. NOTE: the autoload helper is not intended for public use.
import '@vaadin/vaadin-lumo-styles/test/autoload.js';

But the comment makes it sound like it may not be the intended way :smiley:

How was Lumo loaded previously without the FS router? What prevents you from doing the same now but just putting the magic in either $index.tsx or $layout.tsx instead of wherever it was before?

It was loaded through the theme folder, but I don’t have one in this case since I started from scratch.

Then I don’t see what this question has to do with the FS router. You should be able to use the theme folder in the same way regardless of how you configure routing.

Sure. I updated the thread title. My question is: starting with an app from or another source that doesn’t generate a theme folder, I can now easily add a route. But I would like to load Lumo styles without having to create a theme folder. Preferably, I would like to import CSS, but it could also be a JS import if needed.

The empty starting app that you get from Spring Initializr is indeed empty. If you want to use a Spring Data JPA, then you need to follow some specific steps that aren’t apparent just from what you already got . If you want to use Vaadin’s Lumo styles, then there are some other specific steps to follow.

Maybe this currently takes too many steps even if you know how to do it (e.g. to first create theme folder). Then we should consider adding some new functionality for that purpose. Maybe that’s by automatically creating a theme folder? Maybe it’s by providing an official API for loading the Lumo utilities without requiring a theme folder? This needs to be designed and I’m not sure I understand the circumstances well enough to make a good suggestion on the spot.

Ok. So, it sounds that right now there’s no way to only load Lumo styles without setting up the theme folder structure.