Migrating Vuetify 2 to 3: Replace removed styles .v-application/rounded/flat

Question

I'm trying to upgrade from Vuetify/Vue 2 to 3. I'm not a front-end developer, just responsible for upgrading some old code to keep it functional. Unfortunately, the migration guide seems to assume some basic CSS knowledge and doesn't provide examples of how to fix everything that was removed.

I'm trying to figure out how to migrate rounded and flat in the following code snippet:

<v-select
        class="mr-2 filter-custom-input"
        slot="prepend-inner"
        v-model="field"
        :items="fields"
        menu-props="auto"
        label="Field"
        hide-details
        single-line
        density="compact"
        rounded
        flat
        theme="dark"
      />

and .v-application (if needed) in this code snippet:

<style lang="scss" scoped>
.v-application--is-ltr .v-list-item__icon:first-child,
.v-application--is-ltr .mr {
  margin-right: 10px;
}
</style>

Unfortunately, the only suggestion for these on the migration guide is:

The
• rounded attribute has been removed. Please apply the CSS class rounded corners to the menu content elements. For example: .rounded-te
• Global styles that were previously included as .v-application p or .v-application ul are no longer included. If you need to add margin to p, or add left padding to ul and ol, add this in the root component's Manually set in the

Answer 1

You can still use rounded and flat, they are just moved to the underlying VField component.

I think your v2 select will end up without any frames, in which case rounded won't have any visible effect. Add variant="solo" and flat in v3 to get the same effect (see playground)

---

As for the v-application--is-ltr class, it is called v-locale--is-ltr in V3.

If you still need it depends on your application, these are custom rules. Check if a custom mr class is used, and what the margins look like for the first icon in the list (I think now the list icon is set via prepend slot, so the class should be .v -list-item__prepend .v-icon)