Create Vaadin Project with Aura Theme

Flow
1

Hey. How do you create a project with the Aura theme? When I create a project via https://start.vaadin.com/ and then switch the theme to Aura first, it looks like it’s not working properly because, for example, the sidebar doesn’t look right.

What is the right way to create a clean project with the Aura template?

Thanks!

2

Replacing Lumo.STYLESHEET with Aura.STYLESHEET should be enough.

I assume you have tried out restarting the server and clearing the browser cache? (clearing the cache should not be necessary, but it might be a good trace for spotting the issue).

Can you check, if a prod.- or dev.bundle has been created and delete them respectively? If that did not help: can you check, what happens, when you activate vaadin.frontend.hotdeploy in the application.properties?

And if you feel, that you encountered a bug (which it sounds a bit like), it would be nice if you could report that in the github repo with everything you encountered and done, so that it will be analyzed.

3

Aura looks quite plain out-of-the-box with just the default settings. Could it be that the styles are indeed loaded but you just don’t realize it?

For reference, here’s what the different themes look like without any additional styles.

Lumo
localhost_8080_ (2)

Aura
localhost_8080_

Base styles
localhost_8080_ (1)

4

How about styling notifications when using Aura theme?
There is no NotificationVariant.AURA_ERROR

I used to do like this, what now!?

public static void showTempErrorNotification(String msg) {
    Notification
        .show(msg, notificationTimeout, Notification.Position.MIDDLE)
        .addThemeVariants(NotificationVariant.LUMO_ERROR);
}

Do I have to make individual CSS classes for success, warning and error?

5

Notification variants are coming in 25.1: Add more Aura style variants for Notification · Issue #10605 · vaadin/web-components · GitHub

The success, warning, and error variants will become “theme-agnostic”, e.g., NotificationVariant.ERROR. A new INFO variant will be added.

In 25.0, you need custom CSS to style the notifications.

1 Like
6

image
image2484×1276 58.1 KB

Thats how its look like.
For example, I don’t think the navigation bar should be scrollable.
I’m not sure, but I think the NavBar looked different in a preview?

I know there are no components - but I believe even the scrollable NavBar (i.e., scrollable from left to right) should not be like this

7

That looks like you have both Lumo and Aura imported at the same time. Make sure to just import one of them. You might need to do some cache clearing also before restarting the app.

8

I created the project with Create a new Vaadin app: configure views and theme

Is this the best way? I’ve tried everything with clearing the cache. Could it possibly be due to how I created the project?

9

Oh - i got it! using the “builder” was the problem - now it works.

10

Could you elaborate that “builder” for us? :slight_smile: could help others in a same case, if it is a common issue.